Unlocking the Power of Select Options in Vue.js

Question

Unlocking the Power of Select Options in Vue.js

I am currently learning how to use Vue.js. Below is an example of the Javascript code I have written:

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

This program fetches a JSON file first. Here is an example of the JSON format:

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

The JSON data is then placed into the data. The goal is to allow users to select items in each class and use HTML to display each class and student.

Imgur

The HTML code looks like this:

<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 retrieve all selected options. I tried using a method within the function, with the button having @click="submitFunc(), but I'm unsure how to proceed.

If you can provide guidance on how to implement this, it would be greatly appreciated. Thank you!

javascript vue.js

Answer 1

Answer №1

To accomplish this quickly, there are a few techniques you can apply.

One method involves fetching the selected item from the select element by creating a new function and directly accessing the option.

Begin by adding a function called submitFunc in the method options of your component. Inside this function, target the select element.

new Vue({
//...
  methods: {
     submitFunc: function(){
          let select = this.$el.querySelector('#mySelect'); //include an id for convenience
          let selectedOption = select.options[select.selectedIndex];

          console.log(selectedOption); //this will display the element, enabling you to retrieve its value.
          //carry out any additional tasks here
     }

  } 
})

Another approach, suggested by @Kokodoko, is to make use of Vue's two-way data binding feature. Define a selectedItem property in the data options, link it with the select element using the v-model attribute, and access it within the submitFunc function.

new Vue({
    el: '#app',
    data: {
        classes: [],
        selectedItem: null //this will represent your chosen option
    },
    methods:{
        submitFunc: function(){
            const selectedItem = this.selectedItem;

            //work with the selectedItem as necessary
        }
    }
});

Add the following code to your template:

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

<button v-on:click="submitFunc">Submit</butto</answer1>
<exanswer1><div class="answer accepted" i="55862913" l="4.0" c="1556253457" m="1556266212" a="QWJhbmEgQ2xhcmE=" ai="7325182">
<p>There are a couple immediate ways.</p>

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

<p>Create a method <code>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>

Answer 2

To accomplish this quickly, there are a few techniques you can apply.

One method involves fetching the selected item from the select element by creating a new function and directly accessing the option.

Begin by adding a function called submitFunc in the method options of your component. Inside this function, target the select element.

new Vue({
//...
  methods: {
     submitFunc: function(){
          let select = this.$el.querySelector('#mySelect'); //include an id for convenience
          let selectedOption = select.options[select.selectedIndex];

          console.log(selectedOption); //this will display the element, enabling you to retrieve its value.
          //carry out any additional tasks here
     }

  } 
})

Another approach, suggested by @Kokodoko, is to make use of Vue's two-way data binding feature. Define a selectedItem property in the data options, link it with the select element using the v-model attribute, and access it within the submitFunc function.

new Vue({
    el: '#app',
    data: {
        classes: [],
        selectedItem: null //this will represent your chosen option
    },
    methods:{
        submitFunc: function(){
            const selectedItem = this.selectedItem;

            //work with the selectedItem as necessary
        }
    }
});

Add the following code to your template:

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

<button v-on:click="submitFunc">Submit</butto</answer1>
<exanswer1><div class="answer accepted" i="55862913" l="4.0" c="1556253457" m="1556266212" a="QWJhbmEgQ2xhcmE=" ai="7325182">
<p>There are a couple immediate ways.</p>

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

<p>Create a method <code>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>

Unlocking the Power of Select Options in Vue.js

Answer №1

Similar questions

Adding a "Learn More" hyperlink in a JavaScript loop

When utilizing the yo angular-fullstack:endpoint, the message endpoint fails to produce the message.socket.js

What is the best way to create a continuous loop of images on a never-ending

Allowing the contenteditable attribute to function only on a single line of

Tips for providing information for AJAX requests in a Vue.js-CLI application

collaborating with numerous JavaScripts

Difficulty encountered when trying to customize a polymer element that has been expanded (paper-slider)

The installation of npm was unsuccessful due to an unresolved dependency tree

What is the best way to create a fully clickable navbar item for the Bootstrap dropdown feature?

Apply a style to the div element that contains a TextInput component

The Bcrypt hashed password does not match the password hash stored in Mongodb

Generate a graph showcasing the frequency of character occurrences within a specific column of a .csv file

Remove any JSON objects in JavaScript or AngularJS that match another JSON object

Unable to change data in table TD using AJAX and PHP received JSON array

Executing file upload in parent component with Angular 2

Tips for conducting key down event testing on a material ui MenuList element utilizing react-testing-library

Using $route to obtain URL parameters

Is it necessary to include a promise in the test when utilizing Chai as Promised?

Creating a custom pipe that converts seconds to hours and minutes retrieved from an API can be achieved by implementing a transformation function

Enhancing user interfaces with jQuery by updating DOM elements