Question

我从API中提取数据，假设响应看起来像这样

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

我将它分配给vm：

this.users = users;

现在，我在列表中显示这些用户，并希望在特定用户上切换某些状态，例如＆＃34; visible＆＃34;或＆＃34;启用＆＃34;等

目前我这样做：

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和类似的东西。

是否有更好的方法来分配应该被动的属性？我不想为我想要使用的每个自定义属性编写该代码段。

Answer 1

如果是我，我可能会forEach对数据进行// get data from api, then... users.forEach(user => user.enabled=true) this.users = users;并在设置视图模型之前分配其他属性：

ItemContainerStyle

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

Answer 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

有关在Vue.js中设置数据对象属性的最佳做法？

2 个答案: