How to get select option in Vue.js

Question

I am try to use Vue.js. I write javascript code like...

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;
        })
    }
});

The program will fetch a JSON file first.The JSON format like

{
  "classes": [
    {
      "name": "A",
      "students": [
        {
          "name": "Eric",
          "fruit": [
            "apple",
            "banana",
            "orange"
          ]
        },
        {
          "name": "Eickson",
          "fruit": [
            "banana",
            "orange"
          ]
        }
      ]
    },
    {
      "name": "B",
      "students": [
        {
          "name": "Ethan",
          "fruit": [
            "banana",
            "apple"
          ]
        }
      ]
    }
  ]
}

Then put the JSON data into the data . Then I want the user can pick the items in each class. And use HTML to draw each class and each student

Imgur

HTML Code like...

<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>

I want to use the submit button to get all the selected option.

I tried to put a function in method. And button add @click="submitFunc() . But I have no idea to do it...

Please help me how to implement it. Thanks.

Answer 1

There are a couple immediate ways.

First, you can take the selected item from the select element by simple adding a method and taking the option natively.

Create a method submitFunc in your component's method options, in that method, query the select element.

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
     }

  } 
})

Secondly, thanks to @Kokodoko, you can use the Vue's two-way data binding by declaring a selectedItem property in the data options, attaching it in the v-model attribute of the select element, and then accessing it via submitFunc method.

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
        }
    }
});

In the template

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

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