正确实现Vue多选时出错 [英] Error in implementing Vue multiselect properly
问题描述
我正在尝试使用 vue-multiselect 构建下拉列表，但我遇到了一个问题.选择第一个选项后，它工作正常.但是，当我尝试选择另一个选项时，之前选择的选项也会消失.下面给出的是我正在使用的代码:
<div><app-header></app-header><multiselect v-model="value" tag-placeholder="将此添加为新标签" placeholder="搜索或添加标签" label="name" track-by="code" :options="options.campaign_name":multiple="true" :taggable="true" @tag="addTag1" style="width:200px"></multiselect><app-footer></app-footer></模板><脚本>从'./components/header.vue'导入标题从'vue-multiselect'导入多选从'./components/footer.vue'导入页脚导出默认{成分: {'app-header':标题，'app-footer':页脚，'多选':多选},数据() {返回 {价值: [{名称:'国际象棋'，代码:'js'}],选项:{活动名称:[{名称:国际象棋"，代码:js"}，{名称:羽毛球"，代码:js"}]，vmw_platform_test:[],发布版本:[]},}},方法: {addTag1(新标签){常量标签 = {名称:新标签，代码:newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))}this.options.campaign_name.push(tag)this.value.campaign_name.push(tag)}}}<style src="vue-multiselect/dist/vue-multiselect.min.css"></style><样式范围></风格>
我想这一定与我传递数据的方式有关，但这实际上是我需要传递数据的方式，以便了解更大项目的行为.任何帮助表示赞赏.
编辑 1:选择一个组件后，我无法添加更多选项.相反，我可以在所有选项中只删除它.
在您的示例中，您有两个具有相同 code 值的选项，并且您已经设置了 code属性作为将被推送到所选选项的 value 数组中的键进行跟踪.尝试改变这个:
campaign_name:[{name:"Chess", code:"chess"},{name: "Badminton",code:"badminton"}],根据文档(https://vue-multiselect.js.org/):
track-by 用于标识选项列表中的选项，因此它的值必须是唯一的.在这个例子中，name 属性在所有选项中都是唯一的，因此它可以用作跟踪值.
I am trying to build a dropdown using vue-multiselect, where I am facing an issue. Upon selecting the first option, it works fine. However, when I try to select another option, the earlier selected option also disappears. Given below is the code which I am using:
<template>
<div>
<app-header></app-header>
<multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options.campaign_name" :multiple="true" :taggable="true" @tag="addTag1" style="width:200px"></multiselect>
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './components/header.vue'
import Multiselect from 'vue-multiselect'
import Footer from './components/footer.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer,
'multiselect': Multiselect
},
data() {
return {
value: [
{ name: 'chess', code: 'js' }
],
options:{
campaign_name:[{name:"Chess", code:"js"},{name: "Badminton",code:"js"}],
vmw_platform_test:[],
release_version:[]
},
}
},
methods: {
addTag1 (newTag) {
const tag = {
name: newTag,
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
this.options.campaign_name.push(tag)
this.value.campaign_name.push(tag)
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style scoped>
</style>
I guess it must have something to do with the way I am passing the data, but this is actually how I need data to be passed, in order to learn the behavior of a bigger project. Any help is appreciated.
EDIT 1: Upon selecting one component, I am not getting the option to add more options. Instead I am getting the option of only removing it, on all the options.
In your example, you have two options with same code value, and you have set the code property to be tracked as the key that will be pushed into the value array of selected options. Try changing this:
campaign_name:[{name:"Chess", code:"chess"},{name: "Badminton",code:"badminton"}],
As per the docs (https://vue-multiselect.js.org/):
track-by is used to identify the option within the options list thus it’s value has to be unique. In this example the name property is unique across all options, so it can be used as track-by value.
这篇关于正确实现Vue多选时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
