Javascript Vue.js 2.0:从方法修改对象属性

我有一个对象，在我的组件的数据中有一些空白属性，我想用一个在我列出的元素之一上的单击事件上运行的方法来修改它。当我在控制台中检查click事件时，返回了一个对象，其中所有属性都包含

Getter&Setter

这是我的密码：

<template>
    <div>
        <li v-for="user in userList.users" :key="user.localized_name" @click="loadUser(user.name, user.id)>
            Click me!
        </li>
    </div>
</template>

....

data: function () {
    return {
        userList: [...]
        userSelected: {
            name: '',
            id: '',
        }
    }
}

methods: {
    loadUser (userName, userId) {
        Vue.set(this.userSelected, name, userName);
        Vue.set(this.userSelected, id, userId);
        console.log(this.userSelected)
    }
}

把它做成一个答案，这样我就能有更好的结构

当您运行
console.log（someObject）
并使用Chrome或类似浏览器时，开发人员工具不会像您预期的那样复制并打印对象（传递值）。相反，这些工具保留对该对象的引用


这意味着如果您具有以下代码：

const object = { foo: { foo2: 'bar' } };
console.log(object);
object.foo.foo2 = 'bar2';
console.log(object);

在开发人员工具中查看时，第一个和第二个console.log完全相同。这是因为它们指向的引用完全相同


但是，如果首先通过JSON.stringify运行该对象，则这意味着您不再将该对象传递给console.log。相反，两次都会创建一个新字符串

const object = { foo: { foo2: 'bar' } };
console.log(JSON.stringify(object));
object.foo.foo2 = 'bar2';
console.log(JSON.stringify(object));


我确信，开发人员工具以这种方式工作是有原因的，可能是非常好的原因。我不知道它们是什么，也许其他人可以对此发表评论。通常，你要记住的一件小事会让你绊倒

因此，在评论中回答您的问题时，您不需要将对象字符串化以将其传递给其他组件，事实上也不应该这样做，因为这将使事情变得更加困难。在这种情况下，您只需这样做，因为开发人员工具很有趣。
不要使用
Vue.set
来更新对象属性，您只需执行以下操作：
this.userSelected.name=userName
尝试执行
console.log（JSON.stringify（this.userSelected））
，这可能会为您提供更准确的数据。在
Vue.set
调用中，
name
和
id
未定义（您可能指的是
'name'
和
'id'
。如果您没有看到为此报告的错误，例如“未捕获引用错误：名称未定义”，我会非常惊讶此外，在Vue的反应式数据属性上使用
console.log
，由于其类似于代理的性质，很少有用。请改用Vue devtools浏览器扩展。@Dr_Derp This console.log提供了我所期望的信息。当我将此数据作为道具传递给另一个组件时，我是否需要在新组件中对该对象进行字符串化同样的信息？