问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
SevenOutman
    3.2k31225

    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.js
    阅读 7.5k
    4 个回答
    得票最新
    头像
    qianjiahao
      8.4k73136
      ✓ 已被采纳

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

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

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

      头像
      外籍杰克
        8.8k42230

        你要想监听isEaten，你必须监听apples数组，而在你的代码里头，apples是在computed中的属性，这个属性是根据appleNum动态计算的值，这样肯定不行。你需要把apples放在data中，然后监听appleNum来改变apples的值

        例如：
        https://jsfiddle.net/ygjack/kf3m9m6u/

        头像
        Chobits
          7.4k2827

          http://cn.vuejs.org/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-watch

          <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="editor">
        <div v-for="apple in apples" track-by="$index" @click="eat(apple)" v-show="!apple.isEaten">
            <span>{{apple.isEaten}}</span>
        </div>
        {{appleNum}}
    </div>

    <script src="http://cdn.jsdelivr.net/vue/1.0.12/vue.min.js"></script>

    <script type="text/javascript">
        Vue.config.debug = true

        'use strict';

        var vm = new Vue({
            el: '#editor',
            created: function () {
                for (let i = 0; i < 3; i++) {
                    this.apples.push({
                        isEaten: false
                    })
                }
            },
            data: function () {
                return {
                    apples: []
                }
            },
            computed: {
                appleNum() {
                    return this.apples.filter((t) => t.isEaten === false).length
                }
            },
            methods: {
                eat: function (apple) {
                    apple.isEaten = true
                }
            }
        })
    </script>
</body>

          </html>

          头像
          q_tian
            1027

            Vue.js v1.0.16

            我使用v-for="apple of apples", 程序根本无法执行，可能是版本的问题

            按照题主的逻辑

            <div id="seglist" @click="eat">
    <div v-for="apple in apples" :class="{ hidden: apple.isEaten }"  >
         {{ $index }}
    </div>
</div>

<script src="vue.js"></script>
<script>
(function() {
    var vm = new Vue({
        el: '#seglist',
        data: function() {
            return {
                appleNum: 3
            }
        },
        computed: {
            apples: function() {
                var apples = [];
                for (var i = 0; i < this.appleNum; i++) {
                    apples.push({
                        isEaten: false
                    });
                }
                return apples;
            }
        },
        methods: {
            eat: function() {
                this.apples[0].isEaten = true;
            }
        }
    });
    //数组apples会变化
    vm.appleNum = 10;

    //测试eat方法成功，事件方法也是成功的
    vm.eat();

})();
</script>

            eat放在v-for的元素中

            <div id="seglist">
    <div v-for="apple in apples" 
      :class="{ hidden: apple.isEaten }"
      @click="eat(apple)"> 
        {{ $index }}
    </div>
</div>

<script src="vue.js"></script>
<script>
(function() {
    var vm = new Vue({
        el: '#seglist',
        data: function() {
            return {
                appleNum: 3
            }
        },
        computed: {
            apples: function() {
                var apples = [];
                for (var i = 0; i < this.appleNum; i++) {
                    apples.push({
                        isEaten: false
                    });
                }
                return apples;
            }
        },
        methods: {
            eat: function(apple) {
                apple.isEaten = true;
            }
        }
    });
    //数组apples会变化
    vm.appleNum = 10;

    //测试eat方法，事件方法也是成功的
    vm.eat(vm.apples[6]);

})();
</script>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题