Vue.js computed property not working

adam78 picture adam78 · Dec 31, 2015 · Viewed 48.3k times · Source

I have a users data object which has a first_name and last_name and a computed property which returns the full name but the following doesnt seems to work in my v-for directive?

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>

Answer

Azeame picture Azeame · Jan 1, 2016

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.