vue js mutli vselect не позволяет дублировать выбор из выпадающего списка

Question

Добрый день, я новичок в vue.js, я хотел бы, чтобы значения, такие как foo, были выбраны для отключения, когда я пытаюсь выбрать его снова. Проблема в том, когда я выбираю второй, например, баря могу вернуться и выбрать первый, который foo. введите описание изображения здесь Это мой код.

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
  selected:"",
    options: [{
        id: 1,
        label: 'foo'
      },
      {
        id: 3,
        label: 'bar'
      },
      {
        id: 2,
        label: 'baz'
      },
    ],

  }
})

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  color: #2c3e5099;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
}

#app {
  max-width: 30em;
  margin: 1em auto;
}

<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select@latest"></script>


<div id="app">
  <h1>Vue Select - Using v-model</h1>
  <v-select multiple v-model="selected" :options="options"></v-select>
</div>

Answer 1

Я изменил <script src="https://unpkg.com/vue-select@latest"></script> на <script src="https://unpkg.com/vue-select@2.4.0/dist/vue-select.js"></script>. Это работает. Запустите код, чтобы вы знали, о чем я говорю ...

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
  selected:"",
    options: [{
        id: 1,
        label: 'foo'
      },
      {
        id: 3,
        label: 'bar'
      },
      {
        id: 2,
        label: 'baz'
      },
    ],

  }
})

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  color: #2c3e5099;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
}

#app {
  max-width: 30em;
  margin: 1em auto;
}

<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select@2.4.0/dist/vue-select.js"></script>


<div id="app">
  <h1>Vue Select - Using v-model</h1>
  <v-select multiple v-model="selected" :options="options"></v-select>
</div>

Answer 2

Это поведение по умолчанию, поскольку вы помещаете туда несколько атрибутов, но параметр foo не может быть выбран дважды.

Если вы настаиваете на удалении параметра foo после выбора, вы можете сделать это с помощью просмотра модели ('selected') и проверьте, изменилось ли его значение, затем удалите foo из опций.А также, если вы удалите foo, то вы можете получить предыдущее значение модели ('selected'), сравнить его и поместить удаленное значение в опции.

https://vuejs.org/v2/guide/computed.html#Watchers

Hopeэто тебе поможет :) 1008 *