当 allowAdditions 为真时，从 SemanticUI 多选下拉列表中删除值时 V 模型不更新

Question

当我们从语义 UI 多选搜索下拉列表中删除值时，V-model 不会更新。

如果我们输入下拉列表中不存在的任何值并按 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>

按照以下步骤重新创建示例：

点击下拉菜单查看选项
Select 'Angular', 'CSS' 和 'HTML' 一一
选择后，在下拉菜单中输入'Abcd'，然后按Tab键或回车（将创建此值的Pillbox）
现在你会在数组中看到 4 个值
通过单击删除 (x) 图标删除 'Angular' 和 'CSS' - 这些也会自动从数组中删除
现在删除 '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);
      }

    }
  }
})

当 allowAdditions 为真时，从 SemanticUI 多选下拉列表中删除值时 V 模型不更新

V-model not updating while removing a value from SemanticUI multiselect dropdown when allowAdditions is true

semantic-ui

vue.js

dropdown

vuejs2