Jak uzyskać tekst wybranej opcji za pomocą vuejs?

Question

Chcę uzyskać tekst wybranej opcji wejściowej i wyświetlić ją w innym miejscu. Wiem, jak to zrobić za pomocą jQuery, ale chcę wiedzieć, jak możemy to zrobić za pomocą Vuejs.

Oto, jak to zrobić w jQuery. Mam na myśli tekst Wybranej Opcji, a nie wartość.

var mytext = $("#customerName option:selected").text(); 

Tu jest mój HTML

<select name="customerName" id=""> 
     <option value="1">Jan</option> 
     <option value="2">Doe</option> 
     <option value="3">Khan</option> 
    </select> 

{{customerName}} 

Teraz jak mogę wyświetlić wybraną opcję pod nią. jak Jan, Doe, Khan?

Answer 1

miałem ten problem, gdzie potrzeba, aby uzyskać atrybut danych z wybranego opcja, tak to zrobiłem:

<select @change="handleChange"> 
    <option value="1" data-foo="bar123">Bar</option> 
    <option value="2" data-foo="baz456">Baz</option> 
    <option value="3" data-foo="fiz789">Fiz</option> 
</select> 

i metod Vue:

methods: { 
    handleChange(e) { 
     if(e.target.options.selectedIndex > -1) { 
      console.log(e.target.options[e.target.options.selectedIndex].dataset.foo) 
     } 
    } 
} 

Ale można ją zmienić, aby uzyskać innerText czy cokolwiek innego. Jeśli używasz jQuery, możesz $(e).find(':selected').data('foo') lub $(e).find(':selected').text() być nieco krótszy.

Jeśli wiążesz model z elementem select, zwróci on tylko wartość (jeśli została ustawiona) lub zawartość opcji, jeśli nie ma ustawionej wartości (jak przy składaniu formularza).

Answer 2

Można go znaleźć w dokumentacji Vue tutaj: http://vuejs.org/guide/forms.html#Select

Korzystanie v-model:

<select v-model="selected"> 
    <option selected>A</option> 
    <option>B</option> 
    <option>C</option> 
</select> 
<br> 
<span>Selected: {{ selected }}</span> 

W twoim przypadku, myślę, że należy zrobić:

<select name="customerName" id="" v-model="selected"> 
    <option>Jan</option> 
    <option>Doe</option> 
    <option>Khan</option> 
</select> 

{{selected}} 

Tutaj jest działające skrzypce: https://jsfiddle.net/bqyfzbq2/

Answer 3

Zgaduję, jakie są twoje wartości powinien znajdować się w JS. Wtedy możesz łatwo nim manipulować. Po prostu przez dodanie:

data: { 
    selected: 0, 
    options: ['Jan', 'Doe', 'Khan'] 
} 

znaczników będzie czystsze:

<select v-model="selected"> 
    <option v-for="option in options" value="{{$index}}">{{option}}</option> 
</select> 
<br> 
<span>Selected: {{options[selected]}}</span> 

Here is the update JSFiddle

Jak th1rdey3 wskazał, może chcesz używać złożonych danych i wartości nie mógł prosty być indeksy Array . Nadal można używać i wskazywać klucz zamiast indeksu. Here is the implementation.

Answer 4

Możesz użyć stylu Cohars lub możesz również użyć metod. Dane przechowywane są w zmiennej options. Metoda showText wykrywa wybrane wartości i zwraca je. Jedną z korzyści jest możliwość zapisania tekstu w innej zmiennej, np. selectedText

HTML:

<div id='app'> 
    <select v-model="selected"> 
    <option v-for="option in options" v-bind:value="option.value"> 
     {{ option.text }} 
    </option> 
    </select> 
    <br> 
    <span>Selected: {{ showText(selected) }}</span> 
</div> 

javascript:

var vm = new Vue({ 
    el: '#app', 
    data: { 
    selected: 'A', 
    selectedText: '', 
    options: [{ 
     text: 'One', 
     value: 'A' 
    }, { 
     text: 'Two', 
     value: 'B' 
    }, { 
     text: 'Three', 
     value: 'C' 
    }] 
    }, 
    methods: { 
    showText: function(val) {  
     for (var i = 0; i < this.options.length; i++) { 
     if (this.options[i].value === val){ 
      this.selectedText = this.options[i].text; 
      return this.options[i].text; 
     } 
     } 
     return ''; 
    } 
    } 
}); 

JSFiddle pokazując demo

Answer 5

Myślę, że niektóre z odpowiedzi są nieco zbyt skomplikowane, dlatego chciałbym zaoferować łatwiejsze rozwiązanie. Idę tylko do korzystania z programu obsługi zdarzeń w przykładzie i opuścić rzeczy jak modelu wiązania itp

<select @change="yourCustomMethod"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

Następnie w Vue przykład:

... 
methods: { 
    yourCustomMethod: function(event) { 
     var key = event.target.value, // example: 1 
      value = event.target.textContent; // example: One 
    } 
} 
... 

Answer 6

Zakładając, że masz listę klientów i wybrany klient od modelu, przykład jak poniżej powinny działać idealne:

<select v-model="theCustomer"> 
    <option :value="customer" v-for="customer in customers">{{customer.name}}</option> 
</select> 
<h1>{{theCustomer.title}} {{theCustomer.name}}</h1> 

Answer 7

Zamiast definiować wartość tylko jako ID, można powiązać wybraną wartość z obiektu z dwóch atrybutów: wartość i tekst. Na przykład z produktami:

<div id="app"> 
    <select v-model="selected"> 
     <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }"> 
     {{ product.name }} 
     </option> 
    </select> 
</div> 

Następnie można uzyskać dostęp do tekstu przez "wartość":

<h1>Value: 
    {{selected.id}} 
    </h1> 
    <h1>Text: 
    {{selected.text}} 
    </h1> 

Working example

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    \t selected: '', 
 
    products: [ 
 
     {id: 1, name: 'A'}, 
 
     {id: 2, name: 'B'}, 
 
     {id: 3, name: 'C'} 
 
    ] 
 
    } 
 
})

<div id="app"> 
 
    <select v-model="selected"> 
 
     <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">{{ product.name }} 
 
     </option> 
 
    </select> 
 
    <h1>Value: 
 
    {{selected.id}} 
 
    </h1> 
 
    <h1>Text: 
 
    {{selected.text}} 
 
    </h1> 
 
</div> 
 
<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>

Answer 8

poza szablon Mam dostęp do nazwy opcji tak:

let option_name = this.options[event.target.options.selectedIndex].name

Aby to zrobić takie podejście do konfigurowania szablonu:

Zdefiniowane opcje w tablicy jak [{"name":"Bar","value":1},{"name":"Baz","value":2}] ... itd

Umieść swoje opcje w funkcji data składnika <script>export default {function data(){return { options }}}</script>

Załaduj options w szablonie za pomocą v:for: <option v-for="option in options" v-bind:value="option.value">{{option.name}}</option>

Korzystając @change="getOptionName" na elemencie select:

<select @change="getOptionName">

w twojej methods uzyskać nazwę:

getOptionName(event){ let option_name = this.options[event.target.options.selectedIndex].name }

Uwaga w tym wypadku objectoptions w event.target.options nie ma nic wspólnego z Twoimi danymi o nazwie options ... mam nadzieję, że unikniesz zamieszania

Tak więc bardziej zaawansowane podejście, ale uważam, że gdy wszystko jest poprawnie skonfigurowane, nazwa nie jest straszna, chociaż To mogłoby być łatwiejsze.