vue.js - vue中数据对象的监听求指点

问题描述

问 题

vuejs中普通数据对象的属性变化如何监听？

# template
<div v-for="apple of apples" :class="{hidden: apple.isEaten}">

#script
export default {
    data() {
        return {
            appleNum: 3
        }
    },
    computed: {
        apples() {
            let apples = [];
            for (let i = 0; i < this.appleNum; i++) {
                apples.push({
                    isEaten: false
                })
            return apples
        }
    },
    methods: {
        eat() {
            this.apples[0].isEaten = true;
        }
    }
} 

这个apples数组中每个apple的isEaten属性不会被监听。
现在调用eat方法，div并不会加上hidden类。

如何监听isEaten？

解决方案

vue的data里 要么监听的是基本数据类型的值变化，要么监听的是引用数据类型的引用变化。

所以，vue对于数组，才自己封装了一套方法（包括$set,$remove），如果用这套方法之外的方法改变data，vue是感知不到的，所以数据也不会更新

所以，你要监听监听isEaten的话，首先将数组放在data中，然后用vue指定的方法去更改数据，这样就行了

这篇关于vue.js - vue中数据对象的监听求指点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！