当allowAdditions为true时，从SemanticUI multiselect下拉列表中删除值时，V模型不会更新

Question

当我们从Semantic UI multiselect搜索下拉列表中删除值时，V模型不会更新。

如果我们输入下拉列表中不存在的任何值并按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键或输入（将创建此值的Pillbox）
4. 现在，您将在数组中看到4个值
5. 通过单击Remove（x）图标删除'Angular'和'CSS' - 这些将自动从阵列中删除
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);
      }

    }
  }
})