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>
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.