Vuetify:使用动态列表的V芯片V模型

Question

我有一个 vuetify 组件来显示标签列表。

<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绑定到标记的打开/关闭状态，因此它应该只是一个布尔值。下面是一个小提琴示例。

---

在您的情况下，如果您为tags数组中的每个对象指定了一个isOpen属性，则可以像这样使用它：

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

然后，每当tag.isOpen的值发生变化时，该更改将反映在组件的打开/关闭状态中，反之亦然。

下面是一个小提琴示例。