Question

我在<v-autocomplete>中有一个<v-for>下拉列表，用于选择办公室列表中每个办公室的区域。问题是我不理解如何在updateRegion方法内传递索引值，以将当前选择的值与正确的办公区域相关联。也许还有另一种方法可以做到这一点，但我不知道如何。

这是简化的代码：

<template v-for="(office, index) in offices">
    <v-flex xs12 class="mt-3" :key="index">
        <v-card class="white--text">
            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs12 sm4 pr-2>
                        <v-autocomplete
                            :value="office.region.id"
                            :items="regions"
                            :label="Region"
                            @change="updateRegion"
                        ></v-autocomplete>
                    </v-flex>
                </v-layout>
            </v-card-text>
        </v-card>
    </v-flex>
</template>

<script>
    methods: {
        updateRegion(value) {
            // how can I have here the index value?
        }
    }
</script>

Answer 1

如果我答对了，您想在updateRegion方法中访问v-autocomplete中办公室的索引和选定的值。如果我是对的，那么应该通过将office.regio.id和index传递给方法来像下面那样工作。

我还没有时间进行测试。如果它确实起作用，请告诉我。

<template v-for="(office, index) in offices">
    <v-flex xs12 class="mt-3" :key="index">
        <v-card class="white--text">
            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs12 sm4 pr-2>
                        <v-autocomplete
                            :value="office.region.id"
                            :items="regions"
                            :label="Region"
                            @change="updateRegion(office.region.id, index)"
                        ></v-autocomplete>
                    </v-flex>
                </v-layout>
            </v-card-text>
        </v-card>
    </v-flex>
</template>

<script>
    methods: {
        updateRegion(value, index) {

            // how can I have here the index value?
        }
    }
</script>

Answer 2

尝试以下代码：

<template v-for="(office, index) in offices">
    <v-flex xs12 class="mt-3" :key="index">
        <v-card class="white--text">
            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs12 sm4 pr-2>
                        <v-autocomplete
                            v-model="office.region.id"
                            :items="regions"
                            :label="Region"
                            @change="(event) => updateRegion(event, index)"
                        ></v-autocomplete>
                    </v-flex>
                </v-layout>
            </v-card-text>
        </v-card>
    </v-flex>
</template>

<script>
methods: {
    updateRegion(value, index) {
       console.log(value);
       console.log(index); 
        // how can I have here the index value?
    }
}
</script>

验证v-for中的v-autocomplete onchange事件

2 个答案: