时间戳

首页 > 解决方案 > console.log() 不显示实际值

javascript - console.log() 不显示实际值

问题描述

我正在遍历一个列表，在该列表上我使用了 @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!')                    
                }
            }
}

标签： javascriptvue.js

解决方案

您想要选择一系列芯片，因此您multiple的模板中缺少（这只是写问题时的错字吗？）。至于您的旧值问题，当click事件发生时，selectedFixtures尚未使用添加/删除的值进行更新。您需要稍等一下才能得到正确的结果：

添加multiple到模板：

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

并在函数中添加等待滴答声：

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

编解码器

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

推荐阅读