在 Vue.js 中设置数据对象属性的最佳实践？答案

【问题标题】：Best practices regarding setting properties on data objects in Vue.js?在 Vue.js 中设置数据对象属性的最佳实践？
【发布时间】：2016-02-22 21:03:01
【问题描述】：

我正在从 API 中提取数据，假设响应如下所示

users: [{id: 1, name: 'Daft Punk'}, ...]

然后我通过以下方式将其分配给虚拟机：

this.users = users;

现在，我将这些用户显示在一个列表中，并希望切换特定用户的某些状态，例如“可见”或“启用”等。

目前我这样做：

methods: {
    enableUser: function (user) {
        if (user.enabled === undefined) {
            Vue.set(user, 'enabled', false);
        }
        user.enabled= !user.enabled;
    }
}

我做

if (user.enabled === undefined) {
    Vue.set(user, 'enabled', false);
}

部分原因是 API 的响应对象中不存在 enabled 属性，我希望能够将该属性用于 v-show 和类似的事情。

有没有更好的方法来分配应该是反应性的属性？为我想使用的每个自定义属性编写 sn-p 感觉不正确..

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

如果是我，我可能会 forEach 覆盖数据并在将其设置到视图模型之前分配其他属性：

// get data from api, then...
users.forEach(user => user.enabled=true)

this.users = users;

这将使您的其余代码更加简洁 - 无需检查属性是否已定义。

【讨论】：

谢谢。会考虑这个。你知道其他方法吗？

【解决方案2】：

那么，您想为所有对象添加响应式属性吗？最简单的方法是制作适配器功能例如

//adapter function
function adaptToMyApp(externalObj)
{
    //add extra properties as desired
    externalObj.enabled = false;       
}

// fill users from api.
// and adapt them to your app.
users.forEach(user => adaptToMyApp(user))

// now use users as required

【讨论】：