Получить выделенный текст из выбора

Question

Я использую VueJS 2 (с this шаблон), и ниже, что я сделал до сих пор:

<template> 
    <select id="dropDown" v-model="mytrack"> 
      <option value="">Select track</option> 
      <option v-for="track in tracksList" :value="track.circuitId">{{ track.name }}</option> 
    </select> 
    <button type="submit" @click="retrieveByTrack(track.circuitId)"> 
           Search 
    </button> 
</template> 

<script> 
    export default { 
       data() { 

        return { 
         tracksList: [] 
        }; 
       }, 
       created: { 
        // here I fill tracksList[] with a list of tracks 
       }, 
       methods: { 
        retrieveByTrack(trackId){ 
        } 
       } 
     } 
</script> 

Я хочу, чтобы иметь возможность выбрать один из вариантов выбора элемента и когда я нажимаю кнопку отправки, я должен вызвать метод retrieveByTrack(track.circuitId), передающий значение параметра, выбранное в элементе select.

Answer 1

Простой, как этот. Я создал скрипку для вас:

https://jsfiddle.net/npw7fgta/

<div class='col-xs-12'> 
<hr/> 
<div id="app"> 
    <pre>{{ $data |json }}</pre> 
    <select v-model='result'> <option v-for="task in tasks" :value="task.id">{{ task.name }} </option> </select> 
</div> 
</div> 

И JS:

var vm = new Vue({ 
    el: "#app", 
    data: { 

    tasks: [ 
    { id: 0 , name: 'First task'}, 
    { id: 5, name: 'fifth task'} 
    ] 

    } 
}); 

Тогда у вас есть задание/track.id доступны в result, так что вы можете делать все, что вы хотите.