add more dynamic drop-down with vue-multiselect

Question

i'm trying to build add more options with vue-multiselect

The following problems i'm facing are:

not able to select multiple tags for states
not able to remove selected tags for states
old values are coming back on click of plus button
dynamic v-model="" is not working correctly

here is a problem giff https://imgur.com/CS31b6w

Here is a codepen link for better visibility: https://codepen.io/eabangalore/pen/WNjRXym?editors=1010

here is what i have tried:

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
  data () {
    return {
      addMoreOptionsList:[],
      dynamicAddedOptionsHashMap:{},
      value: [],
      options: [
                 {
                   "country": "America",
                   "states":['CA','MA'],
                   id:'111',
                 },
                 {
                   "country": "India",
                   "states":['KA','MH'],
                   id:'22222'
                 },
        
                  {
                   "country": "West Indies",
                   "states":['West Indies1','West Indies2'],
                    id:'3333'
                 },
        ]
    }
  },
  methods:{
        addMoreItems(){
          this.addMoreOptionsList.push('1 more added');
        },
        removeAll(){
          this.addMoreOptionsList = [];
        },
        countrySelected(options){
           //console.log('options',options);
          if(!Object.hasOwnProperty.call(this.dynamicAddedOptionsHashMap,options.id))
                    this.dynamicAddedOptionsHashMap[options.id] = {options:[],values:[]};
                    
         
         
           this.dynamicAddedOptionsHashMap[options.id]['options'] = options.states;
        }
    }
})

body { font-family: 'Arial' } 

.dropdown-item{
  display:flex;justify-content:space-between;margin-left:20px;
  margin-top:20px;
}




  Timeline

user_7499069 · Answer

Problem 1: you can keep the selected states in a separate variable as I keep it in selectedStates.

Problem 2-3: You need to initialize your variable as seen in the demo below.

Problem 4: Dynamic value will work for selectedStates[index]

var app = new Vue({
  el: "#app",
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data() {
    return {
      addMoreOptionsList: [],
      dynamicAddedOptionsHashMap: {},
      value: [],
      selectedStates: [],
      options: [{
          country: "America",
          states: ["CA", "MA"],
          id: "111"
        },
        {
          country: "India",
          states: ["KA", "MH"],
          id: "22222"
        },

        {
          country: "West Indies",
          states: ["West Indies1", "West Indies2"],
          id: "3333"
        }
      ]
    };
  },
  methods: {
    addMoreItems() {
      this.addMoreOptionsList.push("1 more added");
      this.selectedStates.push({
        id: null,
        values: []
      })
    },
    removeAll() {
      this.addMoreOptionsList = [];
      this.dynamicAddedOptionsHashMap = {};
      this.value = [];
      this.selectedStates = [];
    },

    getOptions(id) {
      const option = this.options.find((item) => item.id == id);
      console.log(option)
      if (option) return option.states;
      return []
    },
    selectTheState(index) {
      console.log(this.selectedStates);
      this.selectedStates[index].id = this.value[index].id

    }
  }
});

body {
  font-family: 'Arial'
}

.dropdown-item {
  display: flex;
  justify-content: space-between;
  margin-left: 20px;
  margin-top: 20px;
}





  Timeline

add more dynamic drop-down with vue-multiselect

1 Answers