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

Posted 2023-02-22

【中文标题】Vue Vuetify 读取动态生成的 v-select 元素的选定选项

【英文标题】：Vue Vuetify read selected options of dynamically generated v-select elements

【发布时间】：2021-02-18 21:43:07

【问题描述】：

我在我的 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>

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

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

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

但是，我在网上只能找到如何为单个下拉列表读取 v-select 的选定值。在我的情况下，选择元素的数量是动态的，具体取决于用户 JSON 列表。

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

【参考方案1】：

首先将 v-model="user.previousConditionKey" 和 v-model="user.newConditionKey" 添加到下拉菜单中

观看已检查的用户并删除情绪：

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