Блог

У меня есть пользовательский выпадающий список, созданный с помощью 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" },
      ]
    }
  }
 

и рабочий codepen:

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

Вы используете ту же переменную «value», что и v-model для трех входных данных, что приводит к тому, что все выбранные элементы отображают одни и те же выбранные данные.

Попробуйте изменить разные переменные в v-модели (например, 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>
 

и обязательно добавьте value1 в js:

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