时间戳

首页 > 解决方案 > Bootstarp Vue - 表单标签 - 如何知道从列表中删除了哪个标签？

vue.js - Bootstarp Vue - 表单标签 - 如何知道从列表中删除了哪个标签？

问题描述

嗨，我是 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>

形式形象

标签： vue.js

解决方案

您可以使用 awatcher来观察您的b-form-tagsv-model，以捕捉对其所做的任何更改。

观察者传入新值和旧值。因此，如果您比较两者，您可以找到删除的内容。

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/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.14.0/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/bootstrap-vue@2.14.0/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>

推荐阅读