Recupero del testo dell'elemento selezionato

Question

Quando si associa un elemento <select> utilizzando lo v-model di vue.js, come si otterrebbe il testo dell'opzione selezionata rispetto al valore dell'opzione selezionata?

In HTML:

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

In JS:

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

Quello che vorrei recuperare sia il testo 'Blue', così come il valore '1' facendo qualcosa di simile {{ selected.text }} oppure {{ selected.value }}. Tuttavia, puoi fare solo {{ selected }} che restituisce il valore selezionato per impostazione predefinita.

Rif: Vue.js guide for Dynamic Select Options

Answer 1

Si può semplicemente utilizzare un filtro, come questo:

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; 
     } 
    } 
}); 

esempio di lavoro: http://jsfiddle.net/qfy6s9Lj/9/

Answer 2

In realtà, si potrebbe provare a combinare jquery o codice appena nativo js

La soluzione con 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();} 
     } 
    }, 
}); 

La soluzione senza 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; 
      } 
     } 
    }, 
}); 

Inoltre, si potrebbe creare un componente per il riutilizzo di logica e raggiungere lo scopo di accedere al valore selezionato da {{}} o selected.text {{selected.value}}.