我试图在打开时为v-select中的每个项目添加一个隐藏按钮。单击按钮应从çurrentTags数组中删除该项目。
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css" type="text/css">
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<div id="app">
<v-select :components="{tag-hide}" taggable multiple :options="currentTags" v-model="newTag"></v-select>
</div>
Vue.component('v-select', VueSelect.VueSelect)
Vue.component('tag-hide', {
data: function () {
return {
}
},
methods: {
hideTag: function(){
//retrieve tag and remove from currentTags
}
},
template: '<div><button @click="hideTag(currentTags.[])">Hide</button>
</div>'
});
new Vue({
el: '#app',
data() {
return {
newTag: [],
currentTags: ['#aa','#bb','#cc']
}
}
});
预计将在每个currentTags项旁边显示一个隐藏按钮。单击该按钮会将当前标签传递给从currentTags数组中删除该标签的方法。