Question

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

在HTML中：

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

在JS中：

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

我想要检索的是“蓝色”文本以及通过执行{{ selected.text }}或{{ selected.value }}之类的值“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并研究比较容易获得当前选择（不仅是下拉菜单，而且是用户界面）时，我很感兴趣遇到这个问题。

我发现自2015年5月至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元素。根据{{3}}：

<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 （使用v-bind:value="option.value"），最后将各个选项文本绑定到将要显示的文本（使用{{ 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];

检索选择元素的文本

3 个答案: