Vue.js 计算属性不起作用

Question

我有一个用户数据对象，其中包含名字和姓氏以及一个计算属性，返回完整的姓名，但以下内容似乎在我的 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>

- adam78

Answer 1

我不相信Vue.js中的计算属性可以接受参数，它们应该能够在没有额外交互的情况下构建自己。我认为你的问题在于你编写了一个方法，然后尝试将其注册为计算属性。

所以只需要将函数的注册从computed更改为methods，这应该是一个简单的解决方案，因为它确实是一个方法。

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

    }

通过这种方式，您将不必更改任何其他代码。

- Azeame

---

谢谢，谢谢，谢谢。就这么简单。我想 :) - Travis Le

Answer 2

尝试在计算属性上禁用缓存，就像在https://github.com/vuejs/vue/issues/1189中所提到的那样。这样做，计算出的值将始终被重新计算。

computed: {
  fullName: {
    cache: false,
    get() {
      return user.first_name + ' ' + user.last_name;
    }
  }
}

- Fernanda Lemos

---

但在这种情况下，用户来自哪里？ - Long Tran

已废弃：https://cn.vuejs.org/v2/guide/migration.html#cache-false-deprecated - Hassan Ahmed

Answer 3

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

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

- ceejayoz

Answer 4

你可以在计算属性中映射用户，然后像这样使用映射后的数组：

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}
);

- Mali Naeemi

Answer 5

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

惊喜：在 Vue 中，带有 _ 和 $ 前缀是保留的。

- laffuste

Answer 6

我遇到了类似的情况，当我使用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;
    }
}

- Jorge Wander Santana Ureña

Answer 7

我这里有一个类似的问题：如何在Vue.js中动态地计算，在动态加载的数据下。

但是，最终这是我在讨论和试错后得出的可能解决方案。有几种方法：

1. 创建扩展程序，将计算属性分配到每个元素中，然后在UI中使用item.computedProperty（）（加上双括号）进行调用
2. 假设数据已经加载，例如items，则创建一个观察程序，将计算属性分配给每个元素，然后放入extendedItems中。当绑定到UI时，计算函数将变为响应式，因此UI将使用extendedItems而不是items
3. 使用Vue的this.$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>

- Hans Yulian