代码之家  ›  专栏  ›  技术社区  ›  Hans Yulian

如何在动态加载数据的情况下在Vue.js中进行计算

  •  0
  • Hans Yulian  · 技术社区  · 7 年前

    我的背景是knockout.js。在击倒比赛中,我可以这样做:

    var observable = ko.observable;
    var pureComputed = ko.pureComputed;
    var observableArray = ko.observableArray;
    
    var koRoles = observableArray([]);
    var koUsers = observableArray([]);
    
    
    
    function loadUsersFromApi(){
      //assume this is async function
      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(){
      //assume this is async function
      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中进行计算。

    0 回复  |  直到 7 年前