[嗨,我刚接触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>
您可以使用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>