Vuejs v-on: 옵션태그에서 작동하지 않음클릭

Vuejs v-on: 옵션태그에서 작동하지 않음클릭

여러분, 그래서 저는 사용자가 옵션 태그를 클릭할 때 속성을 설정하는 vueapp을 만들려고 합니다.v-on:click을 사용하려고 하는데 작동하지 않습니다.좋은 생각 있어요?

<div v-show="loggedin==1" class="searchBy">
    <h2>Selected Display</h2>
        <select v-model="selectedDisplayShapeText">
        <option value="" disabled>Please Choose One</option>
      <option v-for="display in displays" :value="display.shapetext" v-on:click="displayName=display.name">{{display.name}}</option>
      </select>
    </div>

에서 옵션을 취득할 수 있습니다.change선택한 이벤트:

new Vue({
  el: "#app",
  data() {
    return {
      displays: [{ name: "Display1", shapetext: "1" }, { name: "Display2", shapetext: "2" }, { name: "Display3", shapetext: "3" }],
      selectedDisplayShapeText: '',
      displayName: ''
    }
  },
  methods: {
    getDisplayName(e){
      let value = e.target.value
      let display = this.displays.find(d => d.shapetext == value)
      this.displayName = display.name
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <h2>Selected Display</h2>
  <select v-model="selectedDisplayShapeText" v-on:change="getDisplayName($event)">
    <option value="" disabled>Please Choose One</option>
    <option v-for="display in displays" :value="display.shapetext">{{display.name}}</option>
  </select>
  <p>Display selected: {{ displayName }}</p>
</div>

Vue에서 선택한 옵션의 값을 복잡한 표현식(이 경우 개체)에 바인딩할 수 있습니다.

선택한 옵션을 표시 개체의 속성에 바인딩하는 대신 표시 개체 자체에 바인딩합니다.그런 다음 선택한 디스플레이의 속성 중 하나가 필요할 때마다 선택한 디스플레이에서 해당 속성만 참조할 수 있습니다.

여기 예가 있습니다.

console.clear()

new Vue({
  el: "#app",
  data:{
    displays: [
      {shapetext: "shape text 1", name: "display one"},
      {shapetext: "shape text 2", name: "display two"},
      {shapetext: "shape text 3", name: "display three"},
      
    ],
    selectedDisplay: {}
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <h2>Selected Display</h2>
      <select v-model="selectedDisplay">
      <option value="" disabled>Please Choose One</option>
    <option v-for="display in displays" :value="display" >{{display.name}}</option>
    </select>
    <hr>
    Selected Display shapetext: {{selectedDisplay.shapetext}} <br>
    Selected Display name: {{selectedDisplay.name}}
</div>

언급URL : https://stackoverflow.com/questions/50727815/vuejs-v-onclick-not-working-on-option-tag