Pobieranie tekstu elementu select

Question

Po powiązaniu elementu <select> przy użyciu v-model vue.js, w jaki sposób uzyskałbyś tekst wybranej opcji w przeciwieństwie do wybranej wartości opcji?

W HTML:

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

W JS:

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

Co chciałbym odzyskać to zarówno tekst 'Blue', jak również wartość '1', wykonując coś jak {{ selected.text }} lub {{ selected.value }}. Można jednak wykonać tylko {{ selected }}, która domyślnie zwraca wybraną wartość.

Ref: Vue.js guide for Dynamic Select Options

Answer 1

można po prostu użyć filtra, na przykład:

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

przykład robocza: http://jsfiddle.net/qfy6s9Lj/9/

Answer 2

Faktycznie, można spróbować połączyć jQuery lub kod tylko rodzimy js

Rozwiązanie z 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();} 
     } 
    }, 
}); 

roztworze bez 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; 
      } 
     } 
    }, 
}); 

Ponadto można utworzyć komponent ponowne logika i osiągnięcia celu uzyskania dostępu do wybranej wartości przez {{selected.text}} lub {{selected.value}}.