javascript - 如何使用vuejs获取选中选项的文本？

Question

我想获取所选选项输入的文本并将其显示在其他地方。我知道如何使用 jQuery 做到这一点，但我想知道我们如何使用 Vuejs 做到这一点。

这是我们在 jQuery 中的做法。我指的是 Selected Option 的文本，而不是值。

var mytext = $("#customerName option:selected").text();

这是我的 HTML

    <select name="customerName" id="">
         <option value="1">Jan</option>
         <option value="2">Doe</option>
         <option value="3">Khan</option>
   </select>

 {{customerName}}

现在如何在其下显示所选选项。像 Jan、Doe、Khan 一样？

Answer 1

您可以将所选值与具有两个属性的对象绑定(bind)，而不是仅将值定义为 id:值和文本。以产品为例:

<div id="app">
   <select v-model="selected">
       <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">
         {{ product.name }}
       </option>
   </select>
</div>

然后就可以通过“值”访问文本了:

   <h1>Value:
     {{selected.id}}
   </h1>
   <h1>Text:
     {{selected.text}}
   </h1>

Working example

var app = new Vue({
  el: '#app',
  data: {
  	selected: '',
    products: [
      {id: 1, name: 'A'},
      {id: 2, name: 'B'},
      {id: 3, name: 'C'}
    ]
  }
})

<div id="app">
   <select v-model="selected">
       <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">{{ product.name }}
       </option>
   </select>
   <h1>Value:
   {{selected.id}}
   </h1>
   <h1>Text:
   {{selected.text}}
   </h1>
</div>
<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>