我的背景是knockout.js。在击倒比赛中,我可以这样做:
var observable = ko.observable;
var pureComputed = ko.pureComputed;
var observableArray = ko.observableArray;
var koRoles = observableArray([]);
var koUsers = observableArray([]);
function loadUsersFromApi(){
var users = [{
name: "this is the name",
roles: ["role1","role2"]
},{
name: "another user",
roles: ["role1"]
}];
for (var i in users)
extendUser(users[i]);
koUsers(users)
}
function extendUser(user){
user.roleSummary = pureComputed(function(){
return summarizeUserRole(user);
})
}
function summarizeUserRole(user){
var roles = koRoles();
var result = [];
var userRoles = user.roles;
for (var i in userRoles){
var userRole = userRoles[i];
for (var j in roles)
if (userRole == roles[j].id){
result.push(roles[j].name);
break;
}
}
return result.join(", ");
}
function loadRolesFromApi(){
var roles = [{
id: "role1",
name: "Role 1"
},{
id: "role2",
name: "Role 2",
}]
koRoles(roles);
}
ko.applyBindings({
users: koUsers,
})
loadUsersFromApi();
loadRolesFromApi();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="user-list">
<table>
<thead>
<th>Name</th>
<th>Roles</th>
</thead>
<tbody data-bind="foreach: users">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: roleSummary"></td>
</tr>
</tbody>
</table>
</div>
我想强调一下
function extendUser(user)
,在本例中,我可以扩展对象,并将纯计算结果放入knockout,它将刷新,即使在这种情况下
koRoles(roles)
稍后完成。所以我想知道如何在Vue.JS中做到这一点。现在我有这样的东西:
<td class="common__center-align">{{ item.roleSummary }}</td>
在我的组件中,我有:
function extendUser(user){
user.roleSummary = this.roleSummary(user);
}
在方法的组成部分
methods: {roleSummary}
具有
roleSummary
与knockout版本中的逻辑相同,但此roleSummary不能成为computed属性。那么,如何在Vue.js中进行计算呢?
我知道另一种选择,方法如下:
-为…制作组件
userRow
把它放进去
-确保先加载角色,然后只加载用户
还有别的办法吗?但我还是想知道如何在Vue.js中进行计算。