javascript—如何通过单击按钮获得多个vue multiselect示例

dfuffjeb 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(323)

我想喝一杯 vue-multiselect 单击“添加更多”按钮即可删除
目前我不知道有什么好办法
问题：如果我添加了两个下拉列表，如果我选择了一个选项，另一个选项也选择了相同的选项，我希望避免这种情况。
注意：每个“添加更多”都应该有自己的示例 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%;
}

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

vue.js JavaScript vuejs3 vue-multiselect

来源：https://stackoverflow.com/questions/68342640/how-to-have-multiple-instances-of-vue-multiselect-with-a-click-of-a-button

1条答案

按热度按时间

iklwldmw1#

定义 value 作为空数组，然后根据循环索引将每个select绑定到该数组中的相应值 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>

赞(0）回复(0）举报 2021-09-13

我来回答

javascript—如何通过单击按钮获得多个vue multiselect示例

app{

1条答案

相关问题

热门标签

最新问答