在v-select中使用子组件

时间:2019-06-12 05:45:00

标签: vuejs2 v-select

我试图在打开时为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数组中删除该标签的方法。

0 个答案:

没有答案