Vue Vuetify 读取动态生成的 v-select 元素的 selected 选项

Question

我在我的 Vue 项目中使用 Vuetify 并填充我正在从 API 中读取的对象列表。

我得到以下 JSON，我用它来生成数据：

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"
            }
        ]
    }
]

我将以上数据渲染如下：

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

当我单击提交按钮时，我想为每个用户读取先前条件 select 和新条件 select 中的 selected 值。

理想情况下，我想生成如下内容：

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

然而，我在网上只能找到如何读取单个下拉列表的 v-select 的 selected 值。在我的例子中，select 元素的数量是动态的，具体取决于用户 JSON 列表。

知道我的情况如何处理吗？

Answer 1

首先添加 v-model="user.previousConditionKey" 和 v-model="user.newConditionKey" 到下拉列表

并观看 checkedusers 并删除心情：

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

Vue Vuetify 读取动态生成的 v-select 元素的 selected 选项

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

vue.js

vuetify.js

v-select