如何使用 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？

原文由 Hujjat Nazari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将选定的值与具有两个属性的对象绑定，而不是将值仅定义为 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>

然后就可以通过“value”访问文本了：

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

工作示例

 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>

原文由 MrMojoRisin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我遇到了这个问题，我需要从选定的选项中获取数据属性，这就是我处理它的方式：

 <select @change="handleChange">
    <option value="1" data-foo="bar123">Bar</option>
    <option value="2" data-foo="baz456">Baz</option>
    <option value="3" data-foo="fiz789">Fiz</option>
</select>

在 Vue 方法中：

 methods: {
    handleChange(e) {
        if(e.target.options.selectedIndex > -1) {
            console.log(e.target.options[e.target.options.selectedIndex].dataset.foo)
        }
    }
}

但是您可以将其更改为 innerText 或其他。如果您使用 jQuery，您可以 $(e).find(':selected').data('foo') 或 $(e).find(':selected').text() 更短一些。

如果您将模型绑定到 select 元素，它只会返回值（如果设置）或选项的内容（如果没有设置值）（就像提交表单一样）。

\*\* 编辑 **

我想说@MrMojoRisin 给出的答案是解决这个问题的一种更优雅的方式。

原文由 Ben Harvey 发布，翻译遵循 CC BY-SA 4.0 许可协议