检索选择元素的文本

Question

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

在 HTML 中：

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

在 JS 中：

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

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

参考：Vue.js guide for Dynamic Select Options

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/

Answer 2

其实你可以试试结合jquery或者只是原生js代码

jQuery 的解决方案

html:

<div id='example'>
     <select v-model="selected" options="myOptions"></select>
</div>

js:

var vm = new Vue({
  el: '#example',
  data: {
      ...
  },
   computed: {
        selectedtext:  {
            cache: false,
            //get selectedtext by jquery
            get: function(){ return $(this.$el).find(":selected").text();}
        }
    },
});

没有jquery的解决方案

html:

<div id='example'>
     <select ref="ddl" v-model="selected" options="myOptions"></select>
</div>

js:

var vm = new Vue({
  el: '#example',
  data: {
      ...
  },
   computed: {
        selectedtext:  {
            cache: false,
            //get selectedtext directly
            get: function(){ 
                 var ddl = this.$refs.ddl;
                 return ddl.options[ddl.selectedIndex].text;
            }
        }
    },
});

此外，您还可以创建一个逻辑复用组件，达到通过 {{ selected.text }} 或 {{ selected.value }} 访问所选值的目的。

Answer 3

Vue 2+ 的答案

我有兴趣遇到这个问题，因为我目前正在评估 Vue 和 React，并研究获取当前选择的相对容易程度（不仅仅是下拉菜单，而是一般的 UI）。

我发现，自 2015 年 5 月至 2015 年 7 月发布这些帖子以来，情况发生了很大变化，当时 Vue 的最新版本是 0.12。 @swift 的答案中的 JSFiddle 今天仍然有效，因为它引入了 Vue 0.12。

使用今天的 Vue，目前是 2.6 版，我找到了一个与今天面临同样问题的人相关的解决方案。有趣的是，使用 2.6，讨论中的标记甚至不会达到初始化选项的程度：

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

在深入研究之后，我发现虽然options 是select 元素的有效HTML DOM 属性，因此可以从JavaScript 访问，但似乎Vue 不再支持像这样在标记中初始化它。相反，我们添加了传统的 HTML option 元素。每https://vuejs.org/v2/guide/forms.html：

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

乍一看，这种变化似乎是倒退了一步。但事实上，记住我们可以使用v-for 和v-bind，我认为这让事情变得更加灵活。为了说明我为什么这么认为，我将首先展示在同一链接页面上给出的示例：

HTML

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>

<span>Selected: {{ selected }}</span>

JS

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
          { text: 'Two', value: 'B' },
          { text: 'Three', value: 'C' }
        ]
      }
    })

在 HTML 中可以看到，这将下拉列表的选定值绑定到 Vue 实例的 selected 属性（使用 v-model="selected"），将单个选项值绑定到每个选项的 value（使用 @ 987654334@），最后将各个选项文本绑定到将要显示的文本（使用{{ option.text }}）。

将selected 绑定到不同的选项属性只是进一步的一小步，可以是文本、id 或选项对象可能具有的任何属性，或者——这就是事情——绑定到选项对象本身。能够将选项本身作为选定值访问意味着我们可以访问它的所有属性，而不仅仅是我们选择绑定到的属性：

HTML

<div id='vm'>
    <select id="ddl1" v-model="ddl1selecteditem">
        <option v-for="option in options1" v-bind:value="option">
            {{ option.txt }}
        </option>
    </select>
    <span>selected item: text='{{ ddl1selecteditem.txt }}', id={{ ddl1selecteditem.id }}</span>
</div> 

JS

var vm = new Vue({
  el: '#vm',
  data: {
    options1: [
      { txt: 'One', id: 1 },
      { txt: 'Two', id: 2 },
      { txt: 'Three', id: 3}
    ],
    ddl1selecteditem: {}
    }
});

vm.ddl1selecteditem = vm.options1[0];