Getting unique values from components generated by a script loop

Question

In a VueJS/Vuetify project, there's the following initial data:

export default {
  data: () => ({
    dirCheckLoading: false,
    projects: '',
    selectedFeatures: [],
    projectOptions: [
      {
        name: 'Valetta',
        value: 'val',
        departOptions: [
          { name: "val1_dep1", isAvailable: true },
          { name: "val1_dep2", isAvailable: false },
          { name: "val2_dep1", isAvailable: true },
          { name: "val3_dep1", isAvailable: true },
          { name: "val3_dep3", isAvailable: true },
        ]
      },
      {
        name: 'Coronado',
        value: 'crd',
        departOptions: [
          { name: "crd1_dep1", isAvailable: true },
          { name: "crd1_dep3", isAvailable: false },
          { name: "crd3_dep1", isAvailable: false }
        ]
      }
    ]
  }
}

I used that data to generate components containing v-chips to be used for filtering:

<v-card>
    <v-combobox v-model="projects" :items="projectOptions" item-title="name" item-value="value">
    </v-combobox>
    <v-container fluid>
        <v-row dense>
            <v-col v-for="(projectOption, index) in projects.projectOptions" :key="index" cols="6">
                <v-card>
                    <v-card-title><em>{{ projectOption.name }}:</em></v-card-title>
                    <v-card-actions>
                        <v-chip-group multiple v-model="selectedFeatures">
                            <v-chip value="self-checkout" filter>Self-Checkout</v-chip>
                            <v-chip value="primary-seat" filter>Primary Seat</v-chip>
                            <v-chip value="onboard-meal" filter>Onboard Meal</v-chip>
                        </v-chip-group>
                    </v-card-actions>
                </v-card>
            </v-col>
        </v-row>
        <pre>{{ selectedFeatures}}</pre>
    </v-container>
</v-card>

Everything works fine until I select any of v-chips: if I choose primary-seat, this option gets highlighted in all components, not just in the chosen one.

The question: how to get user's choice and assign it with the object it was chosen for, e.g.:

[
  { "project": "Valetta", "options": ["val1_dep1", "val3_dep3"] },
  { "project": "Coronado", "options": ["crd1_dep1"] }
]

?

Answer 1

As you are using v-model with the property selectedFeatures and the same v-model value is used in all the projectOptions thus, when selecting a value in a single group it gets selected in all the groups.

You can simply add a property selectedFeatures in each projectOption and in the v-model use that specific value instead of using a generic selectedFeatures array.

<v-chip-group multiple v-model="projectOption.selectedFeatures">

// Updated data will look like:

projectOptions: [
  {
    name: 'Valetta',
    value: 'val',
    departOptions: [
      { name: "val1_dep1", isAvailable: true },
      { name: "val1_dep2", isAvailable: false },
      { name: "val2_dep1", isAvailable: true },
      { name: "val3_dep1", isAvailable: true },
      { name: "val3_dep3", isAvailable: true },
    ],
    selectedFeatures: []
  },
  {
    name: 'Coronado',
    value: 'crd',
    departOptions: [
      { name: "crd1_dep1", isAvailable: true },
      { name: "crd1_dep3", isAvailable: false },
      { name: "crd3_dep1", isAvailable: false }
    ],
    selectedFeatures: []
  }
]