如何在 vue-multiselect 中删除预选标签
How to remove preselected tag in vue-multiselect
我需要一个支持标记并且可以轻松设置样式的下拉菜单,所以我决定实现 vue-multiselect
。它有效,但问题是当页面加载时我的下拉列表中有一个预定义的标签,但我不知道那是什么,我该如何删除它?这是现在的样子:
这是我想要的样子:
这是我的 html 代码:
<div>
<multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Assesors" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
</div>
这是我的 js:
data () {
return {
showAddUserDialog: false,
value: [
{ name: 'Assesors', code: 'as' }
],
options: [
{ name: 'Assesors', code: 'as' },
{ name: 'Finance', code: 'fi' },
{ name: 'Sales', code: 'sa' }
]
}
},
methods: {
addTag (newTag) {
const tag = {
name: newTag,
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
this.options.push(tag)
this.value.push(tag)
}
}
好吧,根据您使用的 <multiselect>
配置和您表现出的预期行为...
你有这个 https://imgur.com/a/D9nEKfD to become this https://imgur.com/a/baTYXht
我看起来你想加载你的页面只显示占位符,但如果你想只显示你的占位符,你不应该在 value
变量中有一个值,因为你有:
data () {
return {
showAddUserDialog: false,
value: [
{ name: 'Assesors', code: 'as' } // <- remove this
],
options: [
{ name: 'Assesors', code: 'as' },
{ name: 'Finance', code: 'fi' },
{ name: 'Sales', code: 'sa' }
]
}
}
因为组件的行为是显示您当前的标签,对吗?
因此,如果此标记是占位符,则可以在用户提交表单时将其添加到 value
而无需选择任何其他标记。
但是,如果您希望将其作为值存在并欺骗组件以仅将其显示为占位符,我建议您深入研究有关自定义模板的文档...
这里说一下https://vue-multiselect.js.org/#sub-custom-option-template
在这里谈论标签插槽
https://vue-multiselect.js.org/#sub-slots
我需要一个支持标记并且可以轻松设置样式的下拉菜单,所以我决定实现 vue-multiselect
。它有效,但问题是当页面加载时我的下拉列表中有一个预定义的标签,但我不知道那是什么,我该如何删除它?这是现在的样子:
这是我想要的样子:
这是我的 html 代码:
<div>
<multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Assesors" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
</div>
这是我的 js:
data () {
return {
showAddUserDialog: false,
value: [
{ name: 'Assesors', code: 'as' }
],
options: [
{ name: 'Assesors', code: 'as' },
{ name: 'Finance', code: 'fi' },
{ name: 'Sales', code: 'sa' }
]
}
},
methods: {
addTag (newTag) {
const tag = {
name: newTag,
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
this.options.push(tag)
this.value.push(tag)
}
}
好吧,根据您使用的 <multiselect>
配置和您表现出的预期行为...
你有这个 https://imgur.com/a/D9nEKfD to become this https://imgur.com/a/baTYXht
我看起来你想加载你的页面只显示占位符,但如果你想只显示你的占位符,你不应该在 value
变量中有一个值,因为你有:
data () {
return {
showAddUserDialog: false,
value: [
{ name: 'Assesors', code: 'as' } // <- remove this
],
options: [
{ name: 'Assesors', code: 'as' },
{ name: 'Finance', code: 'fi' },
{ name: 'Sales', code: 'sa' }
]
}
}
因为组件的行为是显示您当前的标签,对吗?
因此,如果此标记是占位符,则可以在用户提交表单时将其添加到 value
而无需选择任何其他标记。
但是,如果您希望将其作为值存在并欺骗组件以仅将其显示为占位符,我建议您深入研究有关自定义模板的文档...
这里说一下https://vue-multiselect.js.org/#sub-custom-option-template
在这里谈论标签插槽
https://vue-multiselect.js.org/#sub-slots