时间戳

首页 > 解决方案 > Vuetify 创建 2 个相关的 v-select

vue.js - Vuetify 创建 2 个相关的 v-select

问题描述

有什么方法可以改变 Alist v-select，基于 Alist 项目到 ajax，并将结果应用于 Blist 项目循环？这就是我为整合所做的。但它显示：Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "items"

<tr v-for="(item, index) in list" :key="index">
<td>
    <v-select style="width: 250px" :items="Alist" label="Purchase Order" @change="updateBlist(index, $event)"></v-select>
</td>
<td>
    <v-select style="width: 250px" :ref="'Blist'+index" :items="Blist" label="Group Tasks"></v-select>
</td>
</tr>

<script>
export default {
    data() {
        Blist: [],
        Alist: [],
    },
    methods: {
        updateBlist(index, value) {
            // Get Group Task List
            axios
                .get("/api/Blist/list/" + value)
                .then((resp) => {
                    this.$refs.[`Blist${index}`][0].items = [];
                    _.forEach(resp.data.data, (value, key) => {
                        var tmp = {
                            text: value.name,
                            value: value.uuid,
                        };
                        this.$refs.[`Blist${index}`][0].items.push(tmp);
                    });
                });
        }
    }
}
</script>

标签： vue.jsvuetify.js

解决方案

将您的 Alist 选择和 Blist 选择放在子组件中，这样您就不必处理数组索引。如果你想要 Blist 在父组件中的值，只需发出它。

就像是：

子组件

<template>
<td>
    <v-select style="width: 250px" :items="Alist" label="Purchase Order" @change="updateBlist"></v-select>
</td>
<td>
    <v-select style="width: 250px" :items="Blist" label="Group Tasks"></v-select>
</td>
</template>
<script>
export default {
    data() {
        Blist: [],
        Alist: [],
    },
    methods: {
        updateBlist(value) {
            // Get Group Task List
            axios
                .get("/api/Blist/list/" + value)
                .then((resp) => {
                    this.Blist = resp.data.data.map(value=>({
                       text: value.name,
                       value: value.uuid,
                    }))
                });
        }
    }
}
</script>

父组件

<tr v-for="(item, index) in list" :key="index">
   <ChildComponent />
</tr>

推荐阅读