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绘制每个班级和每个学生

Imgur

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属性，并将其附加到Vue的v-model属性中来使用Vue的双向数据绑定。选择元素，然后通过submitFunc方法访问它。

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>

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

1 个答案: