Question

我正在遍历一个使用@click函数更新其他元素的列表。元素索引值绑定到selectedFixtures。我不明白为什么，当我单击一个元素时，它会打印出[]，而当我第二次单击一个元素时，它会打印出旧值ex .: [1]。如何在函数中使用实际值，以便它在第一时间打印出[1]？

                        <v-chip-group
                             v-model="selectedFixtures"
                             multiple
                        >
                            <v-chip v-for="(f, i) in filteredFixtures()" :key="i" @click="selectFixture(f, i)">
                                <div class="d-flex align-baseline">
                                    <span class="font-weight-medium">{{ f.name }}</span>                                 
                                </div>
                            </v-chip>
                        </v-chip-group>

methods: {
             selectFixture(f, index) {
                console.log(JSON.stringify(this.selectedFixtures));

                if (this.selectedFixtures.length === 1) {
                    console.log('here!')                    
                }
            }
}

Answer 1

您要选择一组筹码，因此模板中缺少multiple（在写问题时这只是错字吗？）。关于您的旧值问题，当click事件发生时，selectedFixtures尚未使用添加/删除的值进行更新。您需要稍等片刻，以获得正确的结果：

已将multiple添加到模板：

<v-chip-group v-model="selectedFixtures" multiple>

并在函数中添加等待刻度：

this.$nextTick(() => {
   if (this.selectedFixtures.length === 1) {
     console.log('here')
   }
})

CODEPEN

PS，建议不要在不需要时调用模板中的函数，我说的是 filteredFixtures()，您可以改用计算属性。

console.log（）不显示实际值

1 个答案: