V-модель не обновляется при удалении значения из выпадающего списка SemanticUI с множественным выбором, когда значение allowAdditions равно true

Question

V-модель не обновляется, когда мы удаляем значение из раскрывающегося списка поиска Semantic UI.

Если мы введем какое-либо значение, которого нет в раскрывающемся списке, и нажмем Enter / Tab, то значение будет добавлено в массив в обычном режиме, но при удалении этого значения оно не будет удалено из массива. Тем не менее, он работает нормально, если мы удалим любое из значений, которые были выбраны из выпадающих опций.

Вот мой код:

new Vue({
  el: "#app",
  data: {
		lists:[]
  },
})
$('.ui.dropdown')
    .dropdown({
        allowAdditions: true,
    });

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css" />

<div id="app">
  <h3>Selected values: {{lists}}</h3>
  <select name="skills" multiple="" v-model="lists" class="ui search fluid dropdown">
  <option value="">Skills</option>
  <option value="Angular">Angular</option>
  <option value="CSS">CSS</option>
  <option value="HTML">HTML</option>
</select>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>

Выполните шаги, чтобы воссоздать пример:

1. Нажмите на выпадающее меню, чтобы увидеть опции
2. Выберите «Angular», «CSS» и «HTML» по одному
3. После выбора введите «Abcd» в раскрывающемся списке и нажмите «Tab» или «Enter» (будет создан список для этого значения)
4. Теперь вы увидите 4 значения в массиве
5. Удалите «Angular» и «CSS», нажав на значок «Удалить (x)» - они будут удалены из массива слишком автоматически
6. Теперь удалите «Abcd» - это не будет удалено до тех пор, пока мы не добавим или не удалим все значения, присутствующие в раскрывающемся списке.

Может кто-нибудь помочь, пожалуйста?

Answer 1

Я бы порекомендовал использовать vue-semantics , заданную самой семантикой, потому что это похоже на опции и выбранные значения, которые правильно связаны в бэкэнде, но между тем здесь есть обходной путь для ужесточения этого варианта использования.

Просто используйте обратный вызов onRemove, чтобы удалить невыбранный элемент из списка.Это обеспечит успешное удаление элемента.

new Vue({
  el: "#app",
  data: {
		lists:[],
    options : ["Angular", "CSS", "HTML"]
  },
  mounted: function(){
    $('.ui.dropdown').dropdown({
      allowAdditions: true,
      onRemove : (removedValue, removedText, $removedChoice) => {
        this.verifySelected(removedValue);
      }
    });
  },
  methods : {
    verifySelected : function(removedValue){
      var index = this.lists.indexOf(removedValue);
      if(index > -1){
          this.lists.splice(index, 1);
          console.log(this.lists);
      }

    }
  }
})