Question

我在更改Vue中绑定变量的值时遇到问题（我不确定这是否是由于我对Vue或一般JavaScript的缺乏了解，可能两者都有）。

Vue实例的初始化通过以下代码完成

var vm = new Vue({
    delimiters: ['<<', '>>'],
    el: "#index-container",
    data: {
        posts: [],
        tags: {},
    },
    methods: {
        switchAll: function(what) {
            console.log(what)
            console.log(JSON.stringify(this.tags))
            _.forEach(this.tags, function (v, k) {
                console.log(k)
                this.tags[k] = false
            })
            console.log(JSON.stringify(this.tags))
        }
    },
(...)

在脚本的下方，tags的值设置为Vue.set(vm.tags, tag, true)之类的结构，以确保反应性。然后将它们用于诸如

之类的限制中

<div class="tag on" v-for="(content, name) in tags" v-show="tags[name]" v-on:click="tags[name] = false">

点击此div 会更改对象tags的相关元素的值（之前已初始化）。

到目前为止，一切都按预期进行。

问题出在方法switchAll中。当我使用类似的v-on:click()元素（例如switchAll(false)）时，它会被激活，但控制台输出如下：

false
{"hello":true,"world":true}
hello
world
{"hello":true,"world":true}

我的问题是最后一行应该是{"hello":false,"world":false}。

我尝试使用this.tags[k] = false和this.tags.k = false（虽然两者都是supposed to be equivalent），我相信我遇到的问题是（对于措辞道歉，我是JS的新手） this.tags中的键是＆＃34;裸＆＃34;在我的情况下，而不是＆＃34;引用＆＃34;。我的操作是添加一个新密钥，这次＆＃34;引用＆＃34; （但后来this.tags.k = false应该没问题，因为k是hello或world（没有引号）。

我迷路了 - 我的代码出了什么问题，为什么div的第一个（工作）示例中的内联代码没问题呢？

Answer 1

不是lodash的专家，但似乎是回调函数创建新this的问题。有几种方法可以解决这个问题，例如：

如果您对ES6没问题，请使用lambda函数 - 它们不会创建新的this：

_.forEach(this.tags, (v, k)=>{ console.log(k) this.tags[k] = false })
将this放在某个方法范围的变量中可能很有用：

var vm = this; _.forEach(vm.tags, (v, k)=>{ console.log(k) vm.tags[k] = false })
使用vanillaJS对象循环：

for (var k in this.tags) { vm.tags[k] = false }

为什么不修改绑定变量？

1 个答案: