检索选择元素的文本

Question

<select>使用vue.js 绑定元素时v-model,如何获取所选选项文本而不是所选选项值？

在HTML中:

<select v-model="selected" options="myOptions"></select>

在JS中:

myOptions: [{ text: 'Blue', value: '1' }, { text: 'Green', value: '2' }]

我想要检索的是文本'Blue'以及值'1',通过执行类似{{ selected.text }}或的操作{{ selected.value }}.但是,您只能{{ selected }}默认返回所选值.

参考:动态选择选项的Vue.js指南

Answer 1

您可以只使用过滤器，如下所示：

html:

<div id='vm'>
    Formatted value:<b> {{city | cityFormatter}} </b><br/>
    <br/>
    <select v-model="city" options="cities"></select>
</div>

js:

var vm = new Vue({
  el: '#vm',
  data: {
      city: 'city1',
      cities: [{text: 'Toronto', value: 'city1'}, 
               {text: 'Orleans', value: 'city2'}]
  },
  filters: {
      cityFormatter: function(val) {
          var newVal = '';
          this.cities.map(function(el){ 
              if (val == el.value){
                  newVal = el.value + ' ' + el.text;
              }
          });
          return newVal;
      }
  }
});

工作示例： http: //jsfiddle.net/qfy6s9Lj/9/