Question

当我们从语义UI多选搜索下拉列表中删除一个值时，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>

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

单击下拉列表以查看选项
一个一个地选择“ Angular”，“ CSS”和“ HTML”
选择后，在下拉列表中输入“ Abcd”，然后按Tab键或输入（将创建此值的药盒）
现在您将在数组中看到4个值
通过单击Remove（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模型不会更新

1 个答案: