vuetify: v-chip v-model using dynamic lists

Question

I have a vuetify component to display a list of tags.

<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>

The vuetify documentation says:

Closable chips can be controlled with a v-model.

I do not understand what kind of object I need to specify as a model for each tag if the list of tags is dynamic.

I tried to create an array based on a list of tags:

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

But has failed

Looks like tags should be an array and the v-model should be v-model="tag". Does that work for you? — Lassi Uosukainen, Jul 26 '17 at 19:58

thanksd · Accepted Answer · 2017-07-26T20:31:29.557

7

The v-model in this component is bound to the open/closed state of the tag, so it should just be a Boolean value. Here's an example fiddle.

In your case, if you gave each object in the tags array an isOpen property, then you could use it like so:

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

Then, whenever the value of tag.isOpen changes, that change will be reflected in the open/closed state of the component, and vice-versa.

Here's an example fiddle.

edited Jul 26 '17 at 20:31

answered Jul 26 '17 at 20:00

thanksd

54,176
22
157
150

Yes, thank you, it almost works. The only thing that does not work is hiding the tag. If I press "close", the value of tag.isOpen becomes false, but the tag itself does not disappear – Marsel.V Jul 26 '17 at 20:21
Edited to include a fiddle example using `tag.isOpen`. Check to see how your code differs from that – thanksd Jul 26 '17 at 20:32
Yes, our code is the same. The only difference is that I have tags not in data, but in props – Marsel.V Jul 26 '17 at 20:34
Yes, I found a mistake. The problem was that initially in the tag there was no isOpen property, and I added it when passing the list to the child component `````` – Marsel.V Jul 26 '17 at 20:49
Just what I was looking for. Thank you @thanksd – Ken Jun 27 '21 at 11:58

vuetify: v-chip v-model using dynamic lists

1 Answers1