[Vuejs]-Trying to populate dropdowns menu each time when cloning the form using Vuejs

by

0👍

That’s because you’re rather copying the current element as is by passing an empty value to people array in order for the v-for to re-run, so it’s rendering with the selected value without resetting the inner value of the list, because in theory you’re merely replicating the current element instead of creating a new one. So your solution would be to either forcibly set the options value for the newly created list. Or rather actually create a whole new template and push it to the DOM – Which is the best solution IMO.

0👍

In

<multiselect v-model="value" ...

You are binding all <multiselect>s to the same value.

You have to bind each <multiselect> to its respective person (because person is the variable of the v-for="(person, index) in people".

For example, you could bind each <multiselect> to the person.value: 

<multiselect v-model="person.value" ...

Demo below.

new Vue({
  el: '#app',
  components: {
  	Multiselect: window.VueMultiselect.default
	},
  data: {
    people: [{
         value: []
    }],
    options: [
        { name: 'Vue.js', language: 'JavaScript' },
        { name: 'Rails', language: 'Ruby' },
        { name: 'Sinatra', language: 'Ruby' },
        { name: 'Laravel', language: 'PHP', $isDisabled: true },
        { name: 'Phoenix', language: 'Elixir' }
    ]
  }
})
* { font-size: small; }
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-multiselect@2.0.6"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.0.6/dist/vue-multiselect.min.css">
<div id="app">
  <div v-for="(person, index) in people">
    <div class="form-group">
      <label class="form__label">index number for the form {{ index }}</label><br>

      <label class="typo__label">Single select / dropdown</label>
      <multiselect v-model="person.value" deselect-label="Can't remove this value" track-by="name" label="name" placeholder="Select one" :options="options" :searchable="false" :allow-empty="false"></multiselect>

    </div>
  </div>
  <div>
    <button class="button" @click="people.push({value: ''})">Add</button>
    <button class="button" @click="people.pop()">Remove</button>
  </div>
</div>

Leave a comment