How to dynamically populate a Vue multiple select dropdown with v-for loop?

Question

How to dynamically populate a Vue multiple select dropdown with v-for loop?

I have been attempting to implement multi-select questions in Vue using v-for.

The Select menu and its options are populated via JSON data.

Unfortunately, I am facing difficulty in retrieving the selected results as expected.

Whenever I select an option from the 2nd menu, the selection in the 1st menu gets cleared, and vice versa for the 1st menu.

new Vue({
  el: "#app",
  data: {
    selectedValue: [],
    checklists: [
      {
   "id":1,
   "heading":"Environment",
   "deleted_at":null,
   "created_at":null,
   "updated_at":"2020-08-08T13:24:22.000000Z",
   "checklist_value":[
      {
         "id":1,
         "checklists_id":1,
         "values":"Indoor",
         "notes":null,
         "deleted_at":null,
         "created_at":"2020-08-08T13:03:50.000000Z",
         "updated_at":"2020-08-08T13:03:50.000000Z"
      },
      {
         "id":2,
         "checklists_id":1,
         "values":"Outdoor",
         "notes":null,
         "deleted_at":null,
         "created_at":"2020-08-08T13:13:27.000000Z",
         "updated_at":"2020-08-08T13:13:27.000000Z"
      }
   ]
},
{
   "id":2,
   "heading":"Location of Camera's",
   "deleted_at":null,
   "created_at":"2020-08-08T11:41:31.000000Z",
   "updated_at":"2020-08-08T13:27:59.000000Z",
   "checklist_value":[
      {
         "id":3,
         "checklists_id":2,
         "values":"Parking",
         "notes":null,
         "deleted_at":null,
         "created_at":"2020-08-08T13:28:45.000000Z",
         "updated_at":"2020-08-08T13:28:45.000000Z"
      },
      {
         "id":4,
         "checklists_id":2,
         "values":"Balcony",
         "notes":null,
         "deleted_at":null,
         "created_at":"2020-08-08T13:28:53.000000Z",
         "updated_at":"2020-08-08T13:28:53.000000Z"
      }
   ]
}

    ]
  },
  

  methods: {
    getSelectedID(event) {
      console.log(this.selectedValue);
    }
  }
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="input-field col s12" v-for="(checklist, index) in checklists">
    <select v-model="selectedValue" @change="getSelectedID($event)" multiple="multiple">
      <option disabled>Choose options</option>
      <option v-for="(value,index) in checklist.checklist_value" :value="value.id">{{value.values}}</option>
    </select>
    <label>{{checklist.heading}}</label>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  $(document).ready(function() {
    $('select').formSelect();
  });

</script>

I anticipate that v-model should create a new object for the select menu, map the options as an array, and allow me to pass it to the database for saving.

Your insights on where I may have gone wrong would be greatly appreciated.

Fiddle Link: https://jsfiddle.net/dvwkz15c/

javascript vue.js vuejs2

Answer 1

Answer №1

You keep setting the same variable whenever you update the value of your select elements because they share the same v-model. To prevent overwriting results, you should make selectedValue a nested array instead of just an array.

To fix this, add an index to each v-model so it knows which part of the selectedValue array to update when a value changes or is added.

<div class="input-field col s12" v-for="(checklist, index) in checklists">
    <select v-model="selectedValue[index]" @change="getSelectedID($event)" multiple="multiple">
    ...
</div>

Update:

I apologize for the confusion, my previous solution worked in the fiddle possibly due to version discrepancies. The new issue you're facing can be resolved by defining indices in the Vue data function like this:

<select v-model="selectedValues[index]['values']"  multiple="multiple">

and then change the array definition to an object with child arrays.

selectedValues: [
    { "values": []},
    { "values": []},
],

You can manually add this structure every time you add a checklist, or set up a mounted function in Vue that automatically creates the necessary objects within the selectedValues array based on the length of the checklists array.

Mounted Function Example

selectedValues: [],

...

mounted: function() { 
    for(let i=0; i < this.checklists.length; i ++) {
        this.selectedValues.push({
            "values": []
        });
    }
}

This will create the needed indices in the array whenever the component is mounted. Depending on how your data is loaded, you may need to wrap the for loop in

Vue.nextTick(function() { ... });

If you do this, remember to handle the scope of 'this' accordingly.

If you are fetching data via Ajax, consider placing the for loop inside a method called on mount and after the Ajax call. Since you're using push(..), reset the array before populating it again

this.selectedValues = []; ... (for loop)...

Answer 2

You keep setting the same variable whenever you update the value of your select elements because they share the same v-model. To prevent overwriting results, you should make selectedValue a nested array instead of just an array.

To fix this, add an index to each v-model so it knows which part of the selectedValue array to update when a value changes or is added.

<div class="input-field col s12" v-for="(checklist, index) in checklists">
    <select v-model="selectedValue[index]" @change="getSelectedID($event)" multiple="multiple">
    ...
</div>

Update:

I apologize for the confusion, my previous solution worked in the fiddle possibly due to version discrepancies. The new issue you're facing can be resolved by defining indices in the Vue data function like this:

<select v-model="selectedValues[index]['values']"  multiple="multiple">

and then change the array definition to an object with child arrays.

selectedValues: [
    { "values": []},
    { "values": []},
],

You can manually add this structure every time you add a checklist, or set up a mounted function in Vue that automatically creates the necessary objects within the selectedValues array based on the length of the checklists array.

Mounted Function Example

selectedValues: [],

...

mounted: function() { 
    for(let i=0; i < this.checklists.length; i ++) {
        this.selectedValues.push({
            "values": []
        });
    }
}

This will create the needed indices in the array whenever the component is mounted. Depending on how your data is loaded, you may need to wrap the for loop in

Vue.nextTick(function() { ... });

If you do this, remember to handle the scope of 'this' accordingly.

If you are fetching data via Ajax, consider placing the for loop inside a method called on mount and after the Ajax call. Since you're using push(..), reset the array before populating it again

this.selectedValues = []; ... (for loop)...

How to dynamically populate a Vue multiple select dropdown with v-for loop?

Answer №1

Similar questions

Combining Django Templates and Vue.js

Tips for producing/reserving cropped images from a photo? (includes converting images to base64 format)

The image filter plugin is functioning properly in one project, however, it is not working in

Having trouble utilizing the DatePicker component in my react native application

Why is it not possible to isolate the function for xmlHttp.onreadystatechange?

Exploring and cycling through numerous links using Selenium WebDriver in a node.js environment

React - Image Uploader exclusively accepts images with transparent backgrounds

Send a PHP array to JavaScript to display a horizontal pop-up submenu on hover

Guide to getting Material-UI Dialog up and running smoothly in your React application

Issue: The function connect.compress is not defined

reveal.js: Upon a fresh installation, an error has been encountered: ReferenceError - 'navigator'

Using Angular to pass an index to a pipe function

The enigmatic loop traversal

Navigating between sibling components in Angular 1.5 using the component router

What is the best method for establishing environment variables across different platforms?

Is it possible to populate the blank cells in the weekday columns for previous and following months in a mat-datepicker or mat-calendar's display?

React Bootstrap always displays tooltips

Angular Fire: The $on method is missing and causing an error stating that undefined is not a function

Displaying Images on top of Images with React/Javascript/NextJS

What is the best way to create a smooth sliding effect using CSS?