vuetify：使用动态列表的 v-chip v-model

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 文档说：

Closable chips can be controlled with a v-model.

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

我尝试根据标签列表创建一个数组：

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

但是失败了

Answer 1

这个组件中的v-model绑定到标签的open/closed状态，所以它应该只是一个布尔值。 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>

然后，每当 tag.isOpen 的值发生变化时，该变化将反映在组件的 open/closed 状态中，反之亦然。

Here's an example fiddle.

vuetify：使用动态列表的 v-chip v-model

vuetify: v-chip v-model using dynamic lists

vue-component

vuejs2

vuetify.js