如何删除vue-multiselect中的预选标记

Question

我需要一个支持标记的下拉列表，并且可以很容易地设计样式，所以我决定实现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)
    }
  }

Answer 1

根据您使用的<multiselect>配置和您所显示的预期行为.

你要把这个https://imgur.com/a/D9nEKfD变成这个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

下面是一个示例：

​