如何在Vue.js中获得选择选项

Question

我尝试使用Vue.js。我写的JavaScript代码像...new Vue({    el: '#app',    data: {        classes: []    },    created: function () {        var vm = this        // Fetch API        fetch(xxx.json)        .then(function (response) {            return response.json();        })        .then(function (data) {            vm.classes = data.classes;        })    }});该程序将首先获取一个JSON文件.JSON格式如{  "classes": [    {      "name": "A",      "students": [        {          "name": "Eric",          "fruit": [            "apple",            "banana",            "orange"          ]        },        {          "name": "Eickson",          "fruit": [            "banana",            "orange"          ]        }      ]    },    {      "name": "B",      "students": [        {          "name": "Ethan",          "fruit": [            "banana",            "apple"          ]        }      ]    }  ]}然后将JSON数据放入中data。然后，我希望用户可以选择每个班级中的项目。并使用HTML绘制每个班级和每个学生HTML代码，例如...<div class="row">        <div class="col-3" v-for="class in classes">            Class name: {{ class.name}}</br>            <div class="form-group row" v-for="student in cless.students">                <label class="col-form-label col-sm-2">{{ student.name }}</label>                <div class="col-sm-10">                    <select class="form-control" :name="class.name+'-'+student.name">                        <option></option>                        <option v-for="fruit in class.fruit">{{fruit}}</option>                    </select>                </div>            </div>        </div>      </div>    <button type="submit" " class="btn btn-primary">Submit</button>我想使用提交按钮来获取所有选定的选项。我试图将一个函数放入方法中。并button添加@click="submitFunc()。但是我不知道要怎么做...请帮我实现它。谢谢。

Answer 1

有几种直接的方法。

首先，您可以通过简单地添加方法并以本机方式获取选项，从而从select元素中获取所选项目。

submitFunc在组件的方法选项中创建一个方法，在该方法中，查询select元素。

new Vue({

//...

  methods: {

     submitFunc: function(){

          let select = this.$el.querySelector('#mySelect'); //add an id for ease

          let selectedOption = select.options[select.selectedIndex];

          console.log(selectedOption); //will output the element, you can get the value at this point.

          //do something else

     }

  } 

})

其次，感谢@Kokodoko，您可以通过selectedItem在data选项中声明一个属性，将其附加v-model到select元素的属性中，然后通过submitFuncmethod访问它来使用Vue的双向数据绑定。

new Vue({

    el: '#app',

    data: {

        classes: [],

        selectedItem: null //this will be your selected option

    },

    methods:{

        submitFunc: function(){

            const selectedItem = this.selectedItem;

            //do something with selectedItem

        }

    }

});

在模板中

<select v-model="selectedItem">

   <option></option>

   <option v-for="fruit in class.fruit">{{fruit}}</option>

</select>

<button v-on:click="submitFunc">Submit</button>