Vue.js计算属性不起作用

时间:2015-12-31 21:46:13

标签: vue.js computed-properties

我有一个用户数据对象,它有一个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>

8 个答案:

答案 0 :(得分:18)

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

因此,只需将您的函数注册从computed更改为methods就可以了,这应该是一个简单的修复。

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

    }

这样您就不必更改任何其他代码了。

答案 1 :(得分:15)

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

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

答案 2 :(得分:3)

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

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

答案 3 :(得分:1)

您可以映射计算属性中的用户并使用该映射数组,如下所示:

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

答案 4 :(得分:0)

我有一个类似的情况,当我使用具有未清除的嵌套属性的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;
    }
}

答案 5 :(得分:0)

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

但是,最后,从我经过讨论和反复试验得出的结论来看,这是为您提供的可能解决方案。有几种方法:

  1. 创建扩展程序,在每个元素内分配计算值,然后在用户界面中使用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>

答案 6 :(得分:0)

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

惊喜:_$前缀是reserved in Vue

答案 7 :(得分:-3)

为这样的事情制作计算属性有点过分。

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