0

i want to have a vue-multiselect dropwn with a click of add more button

currently i don't know any good approach

Problem/Question: if i add 2 dropdowns, if i select a option same option is selected for other one also, i want to avoid that.

Note: each add more should have its own instance of vue-multiselect

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
       value: "",
       options:['Calender','Range','Amount'],
       
       multiselectList:[],
    }
  },
  methods:{
      AddMoreMultiselect(){
         this.multiselectList.push('1 more multiselect'); 
      },
      remove(index){
          this.multiselectList.splice(index,1)
      }
  },
})
#app{
  //margin-top:30px;
}


.items{
    display: flex;
    justify-content: space-between;
}

.multiselect{
    width: 80%;
 }
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  
  


<div id="app">

   <div><button @click="AddMoreMultiselect()">Add More</button></div>

    <div class="items" v-for="(multiselect,index) in multiselectList" :key="index">
         <multiselect
        v-model="value"
        :options="options"
         :multiple="false"
        :taggable="false"
      ></multiselect>
      <div><button @click="remove(index)">Remove</button></div>
   </div>
</div>
Learner
  • 61
  • 2
  • 21

1 Answers1

1

Define value as an empty array then bind each select to the respective value in that array based on the loop index v-model="value[index]":

var app = new Vue({
  el: '#app',
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data() {
    return {
      value: [],
      options: ['Calender', 'Range', 'Amount'],

      multiselectList: [],
    }
  },
  methods: {
    AddMoreMultiselect() {
      this.multiselectList.push('1 more multiselect');
    },
    remove(index) {
      this.multiselectList.splice(index, 1)
    }
  },
})
#app {
  //margin-top:30px;
}

.items {
  display: flex;
  justify-content: space-between;
}

.multiselect {
  width: 80%;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>




<div id="app">

  <div><button @click="AddMoreMultiselect()">Add More</button></div>

  <div class="items" v-for="(multiselect,index) in multiselectList" :key="index">
    <multiselect v-model="value[index]" :options="options" :multiple="false" :taggable="false"></multiselect>
    <div><button @click="remove(index)">Remove</button></div>
  </div>

</div>
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
  • works great !!! 1 more thing i need to ask you is that pushing `this.multiselectList.push('1 more multiselect');` is right way to do? – Learner Jul 12 '21 at 06:20
  • You could add the index of the current multiselect as id of the add select like `this.multiselectList.push(this.multiselectList.);` – Boussadjra Brahim Jul 12 '21 at 06:25
  • please have a look on my bounty question related to multiselect https://stackoverflow.com/questions/68324621/how-to-have-dynamic-multiple-dropdown-with-vue-multiselect – Learner Jul 12 '21 at 06:52
  • Ok I'll try to help you if I can – Boussadjra Brahim Jul 12 '21 at 06:53