Vuetify v-autocomplete v-for 内的 onchange 事件

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>