Bootstarp Vue-表单标签-如何知道从列表中删除了哪个标签?

问题描述 投票:0回答:1

[嗨,我刚接触Vue,我想问一下From Tag默认情况下,我用所有类别的列表填充Form-tag列表,如果用户从标签列表中删除了任何类别(标签),我想知道他删除了哪个类别...

我检查了Bootstrap vue文档,但它们具有新的标签ID和新的标签值,但未提及任何有关已选择和删除的内容。

<b-form-tags input-id="tags-basic"
  v-model="selectedCat" 
  class="col-12" 
  placeholder="Selected Categories"
  @@input="appCatFilter()"                                   
>
</b-form-tags>

Image of form

vue.js
1个回答
0
投票

您可以使用watcher来观看b-form-tags v模型,以捕获对其所做的任何更改。

观察者将传入新值和旧值。因此,如果将两者进行比较,则可以找到已删除的内容。

new Vue({
  el: "#app",
  data() {
    return {
      value: ["apple", "orange"]
    };
  },
  watch: {
    value(newVal, oldVal) {
      /* Finds the value(s) that  got removed */
      const removed = oldVal.filter(v => !newVal.includes(v));
      if(removed && removed.length > 0) {
        alert(`${removed} was removed from the list`);
        /* Do something here */
      }
    }
  }
});
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
    <label for="tags-basic">Type a new tag and press enter</label>
    <b-form-tags input-id="tags-basic" v-model="value" class="mb-2"></b-form-tags>
    <p>Value: {{ value }}</p>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.