Vue Vuetify read selected options of dynamically generated v-select elements

Question

I am using Vuetify in my Vue project and populating a list of object which I am reading from the API.

I get the following JSON which I am using to generate a data:

users = [
    {
        "id": "1234",
        "name": "John Doe",
        "description": "Male, 25years old",
        "moods": [
            {
                "key": "1",
                "value": "Happy"
            },
            {
                "key": "2",
                "value": "Sad"
            },
            {
                "key": "3",
                "value": "Anger"
            }
        ]
    },
    {
        "id": "5678",
        "name": "Jane Doe",
        "description": "Female, 20 years old",
        "moods": [
            {
                "key": "1",
                "value": "Happy"
            },
            {
                "key": "2",
                "value": "Sad"
            },
            {
                "key": "3",
                "value": "Anger"
            }
        ]
    }
]

I am rendering the above data as follows:

<template>
    <v-form>
        <v-container>
            <v-row>
                <v-col cols="12">
                    <v-list
                        subheader
                        two-line
                        flat
                    >
                    <template v-for="user in users">
                        <v-list-item v-bind:key="user.id">
                            <template v-slot:default="{ active, }">
                                <v-list-item-action>
                                    <v-checkbox
                                        :input-value="active"
                                        color="primary"
                                        v-model="checkedusers"
                                        :value="user"
                                    ></v-checkbox>
                                </v-list-item-action>

                                <v-list-item-content>
                                    <v-list-item-title v-text="user.name"></v-list-item-title>
                                    <v-list-item-subtitle v-text="user.description"></v-list-item-subtitle>
                                </v-list-item-content>

                                <v-row v-if="user.moods.length > 0" align="center">
                                    <v-col
                                        class="d-flex"
                                        cols="4"
                                        sm="4"
                                    >
                                        <v-select
                                            :items="user.moods"
                                            label="Previous Condition"
                                            item-text="value"
                                            item-value="key"
                                            outlined
                                        ></v-select>
                                    </v-col>

                                    <v-col
                                        class="d-flex"
                                        cols="4"
                                        sm="4"
                                    >
                                        <v-select
                                            :items="user.moods"
                                            label="New Condition"
                                            item-text="value"
                                            item-value="key"
                                            outlined
                                        ></v-select>
                                    </v-col>
                                </v-row>
                            </template>
                        </v-list-item>
                    </template>
                    </v-list>

                    <div class="text-center">
                        <v-btn rounded color="primary" dark @click="registerConditions">Submit</v-btn>
                    </div>
                </v-col>
            </v-row>
        </v-container>
    </v-form>
</template>

When I click the submit button I want to read both the selected values in both previous condition select and new condition select for each user.

So ideally I want to generate something like the following:

{
    "id": "1234",
    "name": "John Doe",
    "description": "Male, 25years old",
    "previousConditionKey": "2",
    "newConditionKey": "2"
}

However all I could find online was how to read selected value of a v-select for a single dropdown. In my case the number of select elements are dynamic depending upon the user JSON list.

Any idea how this can be handled in my situation?

Answer 1

first of all add v-model="user.previousConditionKey" and v-model="user.newConditionKey" to drop downs

and watch checkedusers and remove moods:

watch:{
    checkedusers: function(newVal){
      this.checkedusers.forEach((el, i) => {
        delete el.moods;
      });
    }
  },