vuetify：使用动态列表

Question

我有一个vuetify组件显示的标签列表V芯片V型。

<template> 
    <div> 
     <v-chip 
      v-for="tag in tags" 
      :key="tag.id" 
      v-model="???" 
      @input="onClose(tag)" 
      close 
     > 
      {{tag.name}} 
     </v-chip> 
    </div> 
</template> 

<script> 
    export default { 
     name: 'TagIndex', 
     props: ['tags'], 

     methods: { 
      onClose(tag){ 
       console.log('close tag') 
      } 
     } 
    }  
</script> 

的vuetify文件说：

可关闭的芯片可以与V-模型来控制。

我不明白如果标签列表是动态的，我需要指定哪种对象作为每个标签的模型。

我尝试基于标签列表上创建一个数组：

data(){ 
    return { 
    clonedTags: this.tags.map((t) => {return true}) 
    } 
} 

但始终未能

Answer 1

在此组件的v-model绑定到标签的打开/关闭状态，所以它应该只是一个布尔值。 Here's an example fiddle.

---

在你的情况，如果你的tags数组中给每个对象的isOpen属性，那么你可以使用它像这样：

<v-chip 
    v-for="tag in tags" 
    :key="tag.id" 
    v-model="tag.isOpen" 
    @input="onClose(tag)" 
    close 
> 
    {{tag.name}} 
</v-chip> 

然后，每当​​变化值，即更改将反映在组件的打开/关闭状态中，反之亦然。

Here's an example fiddle.