javascript - 获取数据列表中的类选择选项

码：

<input type="text" id="buyer_name" list="names" v-model="order.name" class="form-control">
<datalist id="names">
    <option v-for="buyer in buyers" :value="buyer.name" :class="buyer.id"></option>
</datalist>

如何获得所选选项的类别？

最佳答案

这应该做。

console.clear()

new Vue({
  el: "#app",
  data:{
    order:{
      name: null
    },
    buyers:[{name: "buyer one", id: 1},{name: "buyer two", id: 2}]
  },
  computed:{
    selectedClass(){
      const buyer = this.buyers.find(b => b.name === this.order.name)
      if (buyer)
        return buyer.id
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>

<div id="app">
  <input type="text" id="buyer_name" list="names" v-model="order.name" class="form-control">
  <datalist id="names">
      <option v-for="buyer in buyers" :value="buyer.name" :class="buyer.id"></option>
  </datalist>

  {{selectedClass}}
</div>