Vuejs v-on: нажмите не работает на теге option - PullRequest
Новая
       10

Vuejs v-on: нажмите не работает на теге option

0 голосов
/ 06 июня 2018

Привет всем, поэтому я пытаюсь создать vueapp, которое устанавливает свойство, когда пользователь нажимает на тег опции.Я пытаюсь использовать v-on: нажмите, но это не сработало.Есть идеи?

<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>

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Вы можете получить опцию для события 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>
0 голосов
/ 06 июня 2018

Вы можете привязать значение опции выбора в 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>
...