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

在模板之外，我可以像下面这样访问选项的名称：

let option_name = this.options[event.target.options.selectedIndex].name

为此，请采用以下方法来设置您的模板：

在[{"name":"Bar","value":1},{"name":"Baz","value":2}]...等数组中定义您的选项

将您的选项放在data组件的功能中 <script>export default {function data(){return { options }}}</script>

options使用v:for以下命令将加载到模板中： <option v-for="option in options" v-bind:value="option.value">{{option.name}}</option>

@change="getOptionName"在select元素上使用：

<select @change="getOptionName">

在您methods的名字中：

getOptionName(event){ let option_name = this.options[event.target.options.selectedIndex].name }

请注意，在这种情况下，object optionsin event.target.options与您命名为options... 的数据没有任何关系，希望可以避免造成混淆

因此，这是一种更高级的方法，但是我相信，只要正确设置所有名称，尽管可能会更容易，但获取名称并不可怕。

我认为这里的一些答案有点太复杂了，因此我想提供一个更简单的解决方案。我将仅在示例中使用事件处理程序，而忽略诸如模型绑定之类的内容。

<select @change="yourCustomMethod">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

然后在您的Vue实例中：

...
methods: {
    yourCustomMethod: function(event) {
        var key = event.target.value, // example: 1
            value = event.target.textContent; // example: One
    }
}
...

您可以在以下Vue文档中找到它：http : //vuejs.org/guide/forms.html#Select

使用v-model：

<select v-model="selected">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

就您而言，我想您应该这样做：

<select name="customerName" id="" v-model="selected">
     <option>Jan</option>
     <option>Doe</option>
     <option>Khan</option>
</select>

{{selected}}

这是一个工作的小提琴：https : //jsfiddle.net/bqyfzbq2/

假设您的模型上有一个customers列表和一个选定的对象customer，则如下所示的示例应该可以正常工作：

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

我尝试使用MrMojoRisin的以下建议

v-bind:value="{ id: product.id, text: product.name }"

但是对我来说，这导致将对象的toString（）表示形式分配给值，即[object Object]

相反，我在代码中所做的是在绑定到该值的相似对象上调用JSON.stringify：

v-bind:value="JSON.stringify({id: lookup[lookupIdFields[detailsSection]], name: lookup.Name})"

然后当然可以使用JSON.parse将其转换回对象，并从结果中获取必需的ID和名称值