从选择中检索选定的文本

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>

我希望能够从 select 元素中选择一个选项，当我单击提交按钮时，我应该调用 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'}
    ]

  }
});

然后，result 中就有 task/track.id 可用，所以你可以做任何你想做的事情。