如何在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({//...&nbsp; methods: {&nbsp; &nbsp; &nbsp;submitFunc: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let select = this.$el.querySelector('#mySelect'); //add an id for ease&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let selectedOption = select.options[select.selectedIndex];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(selectedOption); //will output the element, you can get the value at this point.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //do something else&nbsp; &nbsp; &nbsp;}&nbsp; }&nbsp;})其次，感谢@Kokodoko，您可以通过selectedItem在data选项中声明一个属性，将其附加v-model到select元素的属性中，然后通过submitFuncmethod访问它来使用Vue的双向数据绑定。new Vue({&nbsp; &nbsp; el: '#app',&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; classes: [],&nbsp; &nbsp; &nbsp; &nbsp; selectedItem: null //this will be your selected option&nbsp; &nbsp; },&nbsp; &nbsp; methods:{&nbsp; &nbsp; &nbsp; &nbsp; submitFunc: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const selectedItem = this.selectedItem;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //do something with selectedItem&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }});在模板中<select v-model="selectedItem">&nbsp; &nbsp;<option></option>&nbsp; &nbsp;<option v-for="fruit in class.fruit">{{fruit}}</option></select><button v-on:click="submitFunc">Submit</button>