iview踩坑之路：动态绑定Tag并动态绑定closable属性

我在做项目的过程中，有个需求需要实现input输入内容，按下回车能够动态添加tag标签。使用iview的Tag组件，我的代码如下：

 <Tag closable  class="tagg" :color="tagsColor[index]" 
    v-for="(item,index) of dTag" :key="index" @on-close="handleClose" 
   :name="item" v-text="item">
</Tag>

我定义一个空数组dTag，每次按下回车，就会将内容动态添加到数组。实现的效果如下图：

但是，一个完整的功能是标签应该可以删除，根据iview文档的说明，在Tag组件上添加 closable属性就可以，但是，我加上之后还是无效的。经过我的认真检查和分析，最后发现了问题。在组件中我使用的是v-text绑定的内容。这个时候closable是无法渲染出来的。然后我采用“Mustache”语法，用{{}}来绑定item内容，完美解决，代码如下：

<Tag  closable  class="tagg"  :color="tagsColor[index]" 
      v-for="(item,index) of dTag" :key="index"
      @on-close="handleClose" :name="item" >
      {{item}}
</Tag>

运行效果如下：

最终解决了这个问题，希望对你们有帮助。