0

我有一个使用创建的自定义下拉列表vue-multiselect。它应该是一个简单的下拉列表，将所选选项列为标签。它可以工作，但是当我添加其他下拉列表时，一个下拉列表中的选定标签会出现在所有其他下拉列表中。我怎样才能使每个下拉列表只显示它的选定选项而不填充其他下拉列表？

这是我的代码：

 <multiselect
         v-model="value"
             tag-placeholder="Add this as new tag"
             placeholder="Assesors"
             label="name"
             track-by="code"
             :options="options"
             :multiple="true"
             :taggable="true"
   ></multiselect>


 <multiselect
         v-model="value"
             tag-placeholder="Add this as new tag"
             placeholder="Assesors"
             label="name"
             track-by="code"
             :options="options"
             :multiple="true"
             :taggable="true"
   ></multiselect>


 <multiselect
         v-model="value"
             tag-placeholder="Add this as new tag"
             placeholder="Assesors"
             label="name"
             track-by="code"
             :options="options"
             :multiple="true"
             :taggable="true"
   ></multiselect>

和我的 javascript：

 data() {
    return {
      showAddUserDialog: false,
       value: [],
       options: [
        { name: "Assesors", code: "as" },
        { name: "Finance", code: "fi" },
        { name: "Sales", code: "sa" },
      ]
    }
  }

和一个工作代码笔：

https://codesandbox.io/s/multiselect-tag-example-forked-qecqn

4

1 回答 1

0

您使用与三个输入的 v-model 相同的变量“值”，这导致所有选择显示相同的选定数据。

尝试在 v-model 中更改为不同的变量（例如 value、value1 和 value2），你会没事的。

     <multiselect
         v-model="value"
             tag-placeholder="Add this as new tag"
             placeholder="Assesors"
             label="name"
             track-by="code"
             :options="options"
             :multiple="true"
             :taggable="true"
   ></multiselect>


 <multiselect
         v-model="value1"
             tag-placeholder="Add this as new tag"
             placeholder="Assesors"
             label="name"
             track-by="code"
             :options="options"
             :multiple="true"
             :taggable="true"
   ></multiselect>

并确保在 js 中添加 value1：

 data() {
    return {
      showAddUserDialog: false,
       value: [],
       value1: [],
       options: [
        { name: "Assesors", code: "as" },
        { name: "Finance", code: "fi" },
        { name: "Sales", code: "sa" },
      ]
    }
  }
于 2020-11-22T02:33:57.527 回答