vue中watch执行先于computed，在watch中有调用computed后的对象，该怎么改呢？

站长

2024年06月25日 08:47 · 阅读数 6

比如，我切换图片时，触发以下method：

setActiveImage(image) {
    for (const imageItem of this.imageList) {
        imageItem.active = false;
    }
    image.active = true;
    // 此处修改了watch的值
    this.test = "xxx";
}

这里自动切换到当前图片对象

computed: {
    activeImage() {
        return this.imageList.find((image) => {
            return image.active;
        });
    },
}

最后在watch时使用到了computed后的对象，但是computed是在watch之后执行的，activeImage数据就不对，有没有什么办法解决？

watch: {
    "test": {
        handler() {
            // 这里使用到了computed后的对象，这里的数据不正确
            this.dosomething(this.activeImage);
        },
        deep: true
    }
}

1个回答

test

2024-06-25

Vue.set ：

setActiveImage(image) {
    this.imageList.forEach((imageItem, index) => {
        this.$set(this.imageList, index, { ...imageItem, active: false });
    });
    this.$set(this.imageList, this.imageList.indexOf(image), { ...image, active: true });
}

或者直接调用：

setActiveImage(image) {
    for (const imageItem of this.imageList) {
        imageItem.active = false;
    }
    image.active = true;
    
    // 在这里直接调用
    this.$nextTick(() => {
        this.dosomething(this.activeImage);
    });
}

setActiveImage(image) {
    for (const imageItem of this.imageList) {
        imageItem.active = false;
    }
    image.active = true;
    
    // 在这里直接调用
    this.$nextTick(() => {
        this.dosomething(this.activeImage);
    });
}

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容