关于在 Vue.js 中设置数据对象属性的最佳实践

Best practices regarding setting properties on data objects in Vue.js?

本文关键字：属性 对象 最佳 置数据 Vue js      更新时间：2023-09-26

>我正在从 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 的响应对象中不存在启用的属性，我希望能够将该属性用于 v-show 和类似的事情。

有没有更好的方法来分配应该是反应式的属性？为我想使用的每个自定义属性编写该代码段感觉不对。.

如果是

我，我可能会forEach数据并分配其他属性，然后再在视图模型上设置它：

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

这将使代码的其余部分更加干净 - 无需检查属性是否已定义。

那么

，你想为所有对象添加一个反应式属性吗？最简单的方法是使适配器函数例如

//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
相关文章：