如何使用vuejs获取所选选项的文本？

Question

我想获取所选选项输入的文本并将其显示在其他位置.我知道如何使用jQuery,但我想知道如何使用Vuejs.

以下是我们在jQuery中的工作方式.我的意思是选择选项的文本而不是值.

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

您可以将选定的值与具有两个属性的对象绑定,而不是仅将值定义为id:value和text.例如产品:

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

工作实例

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>

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给出的答案是一种更优雅的解决方法.

Answer 3

下面的代码用于从所选选项中获取文本。我添加了一个v-on:change ，它对select 元素调用函数onChange() 。

methods:{
    onChange: function(e){
        var id = e.target.value;
        var name = e.target.options[e.target.options.selectedIndex].text;
        console.log('id ',id );
        console.log('name ',name );
    },


 <select name="customerName" id="" v-on:change="onChangeSite($event)">
         <option value="1">Jan</option>
         <option value="2">Doe</option>
         <option value="3">Khan</option>
   </select>

Answer 4

假设您在模型上有一个customers列表和一个选择customer，下面的示例应该可以完美运行：

<select v-model="theCustomer">
    <option :value="customer" v-for="customer in customers">{{customer.name}}</option>
</select>
<h1>{{theCustomer.title}} {{theCustomer.name}}</h1>