Question

尝试在Vue.js中动态添加观察者。所需/实际结果之间的断开显示在下面的注释部分中。偶尔/业余编码员在这里;我怀疑我的问题与Vue相比较少，而且对JavaScript基础知识有所了解。提前谢谢！

new Vue({
    el: '#app',
    data: {
        a: 1,
        b: 2,
        c: 3
    },
    methods: {
        setUpWatchers(array) {
            for (var i in array) {
                var key = array[i];

                this.$watch(key, function(newValue) {
                    console.log(key + ': ' + newValue);

                    //desired output is:
                    //  a: 4
                    //  b: 5
                    //  c: 6

                    //actual output is:
                    //  c: 4
                    //  c: 5
                    //  c: 6

                });
            }
        }
    },
    created() {
        this.setUpWatchers(['a', 'b', 'c']);

        this.a = 4;
        this.b = 5;
        this.c = 6;
    }
});

Answer 1

你是对的，这是一个经典的javascript＆＃34;陷阱＆＃34;。

使用var声明的变量具有函数范围。当使用var 在循环中声明的所有函数时（你声明为3; $ watch的处理程序）正在使用same变量，在循环之后完成后，指向c。

快速解决方法是使用let声明变量。 let具有块范围，因此在循环中声明的每个函数都只能访问创建函数时存在的变量副本。

这是一个有效的例子。

＆＃13;

new Vue({
    el: '#app',
    data: {
        a: 1,
        b: 2,
        c: 3
    },
    methods: {
        setUpWatchers(array) {
            for (let i in array) {
                let key = array[i];

                this.$watch(key, function(newValue) {
                    console.log(key + ': ' + newValue);
                });
            }
        }
    },
    created() {
        this.setUpWatchers(['a', 'b', 'c']);

        this.a = 4;
        this.b = 5;
        this.c = 6;
    }
});

＆＃13;

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app"></div>

＆＃13;

理想情况下，这些天你应该使用let或const，而且几乎不会var。有许多资源可用来描述差异。

在for循环中设置vue.js观察者

1 个答案: