26

我有一个用户数据对象，它有一个 first_name 和 last_name 以及一个返回全名的计算属性，但以下似乎在我的 v-for 指令中不起作用？

new Vue({

        el: '#content',

        data: {
          "users": [
            {
              "id": 3,
              "first_name": "Joe",
              "last_name": "Blogs"
            },
            {
              "id": 3,
              "first_name": "Jane",
              "last_name": "Doe"
            }
          ]
       },
        computed: {
           fullName: function (user) {
                return user.first_name + ' ' + user.last_name;
            }

        }

    });



    <tr v-for="user in users | orderBy fullName(user)">
          <td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
              {{fullName(user)}} 
         </td>
    <tr>
4

7 回答 7

33

I don't believe that a computed property in Vue.js can accept an argument, they are supposed to be able to build themselves without additional interaction. I believe that your fault was that you wrote a method and then tried to register it as a computed property.

So it should be a simple fix to just change the registration of your function from computed to methods which it really is.

methods: {
       fullName: function (user) {
            return user.first_name + ' ' + user.last_name;
        }

    }

This way you will not have to change any of your other code.

于 2016-01-01T22:48:48.013 回答
21

尝试禁用计算属性上的缓存，如https://github.com/vuejs/vue/issues/1189中所述。这样做，计算值将始终重新计算。

computed: {
  fullName: {
    cache: false,
    get() {
      return user.first_name + ' ' + user.last_name;
    }
  }
}
于 2017-01-04T22:14:28.177 回答
3

计算属性不支持这样的嵌套。

证明和一些解决方法/替代解决方案：https ://github.com/vuejs/vue/issues/66

于 2015-12-31T21:50:30.880 回答
2

您可以在计算属性中映射用户并使用该映射数组，如下所示：

computed: {
  fullName: function () {
    return this.users.map(
      item => item.first_name + ' ' + item.last_name
    );
  }
}

然后在视图中您可以执行以下操作：

<tr v-for="(user, item) in users">
   <td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
     {{fullName[item]}} 
   </td>
<tr>

我正在使用 es6 箭头功能。如果您不想使用箭头功能，那么您可以执行以下操作：

return this.users.map(
  function(item) {return item.first_name + ' ' +item.last_name}
);
于 2017-03-21T22:54:42.723 回答
1

另一个原因：带有下划线 ( _) 前缀的属性不会触发computed。

Surprise:_和Vue 中保留了$前缀。

于 2019-04-10T14:11:26.730 回答
1

当我使用带有未清除嵌套属性的 props 属性时，我遇到了类似的情况。出于某种原因，我做了这项工作

console.log(user.first_name)

       fullName: function (user) {
            console.log(user.first_name)
            return user.first_name + ' ' + user.last_name;
       }

另外，我使用 lambda 表达式 https://stackoverflow.com/a/46234335/726751完成了这项工作

computed: {
    fullName: _this => {
        return _this.user.first_name + ' ' + _this.user.last_name;
    }
}
于 2017-09-20T12:17:26.523 回答
0

我在这里有一个类似的问题：How to dinamically make computed in Vue.js, under dynamicly loaded data。

但是，最后这是我在讨论和反复试验后得出的结论为您提供的可能解决方案。有几种方法：

  1. 创建扩展器，在每个元素内部分配计算，然后item.computedProperty()在 UI 中调用它（带双括号）
  2. 假设数据已加载，例如items，创建一个观察器，将计算分配给每个元素，然后放入内部extendedItems。当绑定到 UI 时，计算函数将变为响应式，因此 UI 将使用extendedItems而不是items
  3. 使用 vuethis.$set手动设置和启用对计算的反应性。

这是使用来自解决方案编号 1 的函数计算：

new Vue({

    el: '#content',

    data: {
      "users": [
        {
          "id": 3,
          "first_name": "Joe",
          "last_name": "Blogs"
        },
        {
          "id": 3,
          "first_name": "Jane",
          "last_name": "Doe"
        }
      ]
   },
    computed: {
        extendedUsers: function(){
            var users = this.users;
            for (var i in users)
                this.extendUser(users[i])

        },
        extendUser: function(user){
            user.fullName = function(){
                return user.first_name + " " + user.last_name;
            }
        }

    }

});



<tr v-for="user in users | orderBy user.fullName()">
      <td class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
          {{user.fullName()}} 
     </td>
<tr>
于 2018-07-09T11:36:01.717 回答