Semantic UI多选下拉框自定义值删除时V-model不更新求助

嘿，这个问题我之前也碰到过！原因其实很简单：Semantic UI的下拉组件是靠jQuery直接操作DOM实现的，而Vue的v-model是通过监听原生表单元素的change事件来同步数据的。当你删除自定义添加的选项时，Semantic UI并没有触发原生<select>的change事件，所以Vue完全不知道数据已经发生变化，自然不会更新lists数组。

下面是具体的解决方案，只需要修改你的JavaScript代码即可：

new Vue({
  el: "#app",
  data: {
    lists: []
  },
  mounted() {
    // 保存Vue实例的引用，避免回调里this指向改变
    const vm = this;
    $('.ui.dropdown').dropdown({
      allowAdditions: true,
      // 利用Semantic UI提供的onRemove回调手动同步数据
      onRemove: function(value) {
        // 过滤数组，移除被删除的项
        vm.lists = vm.lists.filter(item => item !== value);
      }
    });
  }
});

为什么这样能解决问题？ #

Semantic UI的dropdown组件提供了onRemove钩子，不管你删除的是原生选项还是自定义添加的选项，这个回调都会被触发。我们在这个回调里手动修改Vue的lists数组，就能让Vue实时感知到数据变化，页面上的Selected values也会同步更新了。

另外还要注意：把dropdown的初始化代码放在Vue的mounted钩子中，确保Vue已经渲染完DOM，这样jQuery才能正确选中.ui.dropdown元素。

你可以试试这个修改后的代码，删除自定义项'Abcd'的时候，lists数组会立刻同步移除它，不需要等到操作原生选项才更新~

内容的提问来源于stack exchange，提问作者Pranav Kaistha