使用 vue-multiselect 添加更多动态下拉菜单答案

【问题标题】：add more dynamic drop-down with vue-multiselect使用 vue-multiselect 添加更多动态下拉菜单
【发布时间】：2021-09-23 04:03:49
【问题描述】：

我正在尝试使用 vue-multiselect 构建添加更多选项

我面临的以下问题是：

无法为states 选择多个标签
无法删除states 的选定标签
点击加号按钮会恢复旧值
动态v-model="" 无法正常工作

这里有个问题 gif https://imgur.com/CS31b6w

这里是一个 codepen 链接以提高可见性：https://codepen.io/eabangalore/pen/WNjRXym?editors=1010

这是我尝试过的：

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

<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline</title>
  <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>
</head>

<body>
<div id="app">

  <div style="display: flex; margin-bottom: 20px; text-align: end; justify-content: flex-end;"><button style="margin-right:20px;" @click="removeAll()">X</button><button @click="addMoreItems()">+</button></div>
  
<div class="dropdown-item" v-if="addMoreOptionsList.length" v-for="(item,index) in addMoreOptionsList">
  <multiselect
    v-model="value[index]"
    placeholder="Country?"
    label="country"
    :options="options"
    :multiple="false"
    :taggable="false"
    @select="countrySelected($event)"
  ></multiselect>
 
  
   <multiselect style="margin-left:20px;"
    v-if="value[index] && dynamicAddedOptionsHashMap[value[index].id]"
    v-model="dynamicAddedOptionsHashMap[value[index].id].values"
placeholder="States?"    
   :options="dynamicAddedOptionsHashMap[value[index].id].options"
    :multiple="true"
    :taggable="false"
    @select="countrySelected($event)"
  ></multiselect>
</div>

</div>
</body>

【问题讨论】：

标签： javascript vue.js vuejs3 vue-multiselect

【解决方案1】：

问题 1：您可以将所选状态保存在单独的变量中，就像我将其保存在 selectedStates 中一样。

问题 2-3：您需要初始化变量，如下面的演示所示。

问题 4：动态值适用于 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;
}

<!DOCTYPE HTML>
<html>

<head>
  <title>Timeline</title>
  <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>
</head>

<body>
  <div id="app">

    <div style="display: flex; margin-bottom: 20px; text-align: end; justify-content: flex-end;"><button style="margin-right:20px;" @click="removeAll()">X</button><button @click="addMoreItems()">+</button></div>

    <div class="dropdown-item" v-for="(item,index) in addMoreOptionsList">
      <multiselect v-model="value[index]" placeholder="Country?" label="country" :options="options" :multiple="false" :taggable="false"></multiselect>


      <multiselect style="margin-left:20px;" v-if="value[index]" v-model="selectedStates[index].values" placeholder="States?" :options="getOptions(value[index].id)" :multiple="true" :taggable="false" @select="selectTheState(index)"></multiselect>
    </div>

  </div>
</body>

【讨论】：

真的很棒！！
你救了我的命！！
嗨，我正在获取 selectedStates 的值，就像这样 [['MH','KA'],['CA']] 我不明白哪些值是 id 的值是否有可能将值与 id 关联。我问你是为了帮助
它也与您的value 相关联。假设您的value[0] 是澳大利亚，而selectedStates[0] 将代表value[0] 澳大利亚。这有意义吗？？
你说得有道理，但是当它坏了我们不能说，这就是为什么问你。