Dinamically activate v-chip if in array

[hypericon]

hello,

I am trying to activate specific v-chips from vuetify if the id value they are storing is contained in an ajax response.

<v-chip-group
                  v-model="tools"
                  column
                  multiple
                >
                  <v-chip
                    filter
                    outlined
                    v-for="(tool, index) in tooltable"
                    :key="index"
                    :value="tool.tool_id"
                    :input-value="activateChip(tool)" //here I think I should do something :)
                  >
                  {{tool.tool_name}}
                  </v-chip>
                </v-chip-group>


....

 methods: {
    activateChip: function (tool) {
      if (this.editedItem.tools.includes(tool.tool_id)) {
        return tool.tool_id
      }
    },

but v-chips stil remain un-active even if the return, effectively returns just the ids which should activate the chip...

any idea?

[Renato66]

well... there is no build it solution for this...

but here is the code with a solution
https://codepen.io/renato66/pen/XWKNbzJ?editors=1111

[hypericon]

I still can't get why this is not working to me..
You code is real PRO, godblessya, but there's a lot to manage a fake API call and intercept wether I am importing from API or selecting, if I could understand everything...

to go for short ways:
this.tools.push(tooltableId) is basically what it tells to the v-chip-group which inner items to activate, correct?

I have the list of numeric values taken from API call and then I am now simply "pushing" them in the array like you did...

...
listUsers: function () {
      API.get('/admin/user.php?act=list')
        .then((response) => {
          if (response.data.status === 'ok') {
            this.usertable = []
            for (let i = 0; i < response.data.users.length; i++) {
              this.usertable.push({
....
                tools: response.data.users[i].tools,
...

on EDIT user, according to v-table documentation:

editUser: function (item) {
...
for (var d = this.editedItem.tools.length - 1; d >= 0; d--) {
        this.tools.push(this.editedItem.tools[d].tool_id)
      }

but the chips doesn't get selected...

[Renato66]

have you tried using

this.$set(this, 'usertable', [{
  tools: response.data.users[i].tools,
}])

[hypericon]

found the solution (mostly thank to your this.tools.push as gave me clues to follow) wasted hours... :(

finally.
it’s just a matter of assigning to the v-chip model the chip value.

vChipModel: [values],
after the API call it was just a matter of pushing in vChipModel the values… 🤯