[Vuejs]-Vuetify create 2 related v-select

by

0👍

Put your Alist select and Blist select in a child component so you don’t have to deal with array index. If you want the value of Blist in parent component, just emit it.

Something like:

Child Component

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

Parent Component

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

Leave a comment