Vuetify, v-model and groups: create then edit entity

Hello there!

Ok, I’ve a form which is used to create an Entity with an API call, it’s quite normal and it works. I need to use v-btn-toggle and v-chip-groups to define some datas of the entity (for example, we can add tags to an entity by pressing on chips in a chip group with a v-model=“activity.categories”).

My problem is that I need to update/edit an entity, but I have some trouble understanding how I can use that very same groups to display the current data of an entity, and then change it.

For example, via the Creation Form and by clicking on chips, I create an entity with that sort of data:

[ { "@id": "/api/categories/2", "@type": "Category", "name": "Plage", "icon": "$beach" }, { "@id": "/api/categories/8", "@type": "Category", "name": "Balade", "icon": "$hike" } ] 

Now, with that piece of data, I need to toggle the right chips to match the data if it is already selected, on the Edit Form. Am I clear? I was hoping that a simple v-model would do that quite magically, but apparently not.

<v-chip-group v-model="activity.categories" multiple column @change="clickInfosChanged = true">
    <v-chip v-for="category in categories" :key="category['@id']" :value="category['@id']" class="text-capitalize ma-2" filter label outlined small color="#037971">{{ category.name }}</v-chip>
</v-chip-group>

So, that code creates a correct set of data but now I need to use that entity to display the correct selected chips. I guess it’s about the “filter” prop of the chip…

Same question with a v-btn-toggle: how can I apply the “selected effect” on buttons?

How can this be done?

Thank you.

Sorry, I really need a hand on that!

If I do something like that in computed:

selectedCategories: {
  get: function() {
    let array = [];
    for (let cat of this.activity.categories) {
      array.push(cat['@id']);
    }
    return array;
  },
  set(value) {        
    this.activity.categories = value;
    console.log(this.activity.categories); 
  }      
},

and on my template:

<v-chip-group v-model="selectedCategories" multiple column @change="clickInfosChanged = true">
   <v-chip v-for="(category, index) in categories" :key="index" :value="category['@id']" class="text-capitalize ma-2" filter label outlined small color="#037971">{{ category.name }}</v-chip>
</v-chip-group>

The right chips are checked, and that’s a win. When I first click on an another chip, I get something correct in my Console.log: an array with all the selected values. BUT, all the chips are now unchecked. And if I click another time, this time I get an inconsistent array and an error: “cat is undefined” (the word “cat” is only used on that getter function above), and the array contains “undefined” values then the chip value I’ve just clicked.

What am I doing wrong? What is the correct way to achieve this?

Thanks for any help.


EDIT: in the setter function, if I write:

set(value) {
    //this.activity.categories = value;        
    console.log(value); 
 }

I get the desired result. “Value” is what I want to assign to this.activity.categories. But If I uncomment this.activity.categories = value, it dosen’t work.


EDIT2:
I’m testing other ways to achieve what I need. I wanted to try to switch on the “filter” props according to the selected categories.

isSelectedCategory() {
  return category => this.selectedCategories.includes(category);
},

And in my chip (for testing purposes):

<v-chip v-for="(category, index) in categories" :key="index" :value="category['@id']"  :filter="isSelectedCategory(category['@id'])">{{ isSelectedCategory(category['@id']) }}</v-chip>

It does write the correct value “true” or “false” in the chip name but doesn’t apply to the filter prop. I’m really confused.