Invalid computed property Vue.js

Question

I have a user data object that has first_name and last_name and a computed property that returns the full name, but the following doesn't seem 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 1

I do not think that the computed property in Vue.js can take an argument, they should be able to build themselves without additional interaction. I believe that your fault is that you wrote a method and then tried to register it as a computed property.

So, this simple solution is to simply 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 do not have to change any other code.

Answer 2

Try disabling the cache for the computed property, as indicated at https://github.com/vuejs/vue/issues/1189 . In this case, the calculated value will always be recalculated.

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

Answer 3

Computable properties do not support such an attachment.

Proof and some workarounds / alternative solutions: https://github.com/vuejs/vue/issues/66

Answer 4

You can map users in a computed property and use this mapped array as follows:

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

Then you can do something like:

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

And I use es6 arrow function. If you do not want to use the arrow function, you can do something like:

 return this.users.map( function(item) {return item.first_name + ' ' +item.last_name} ); 

Answer 5

I had a similar case when I use the props property with unshared nested properties. For some reason, I did this work by doing

console.log(user.first_name)

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

In addition, I did this work using the lambda expression https://stackoverflow.com/a/166298/

 computed: { fullName: _this => { return _this.user.first_name + ' ' + _this.user.last_name; } } 

Answer 6

I have a similar question: how to dynamically create calculations in Vue.js under dynamically loaded data .

But, in the end, here is a possible solution for you from the conclusion that I get after discussion and trial and error. There are several ways:

1. create an expander that will assign a compute inside each element, and then call it using item.computedProperty() in the user interface (with double brackets)
2. Suppose the data is loaded, such as items , create an observer that will assign a calculated one to each element, and then put it in extendedItems . the computed function will become reactive when bound to the user interface, so the user interface will use extendedItems items instead of items
3. use vue this.$set to manually set and enable reactivity for calculated values.

This is calculated using the function from solution No. 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> 

Answer 7

Another reason: properties with an underscore ( _ ) prefix will not trigger computed .

Surprise: the _ and $ prefixes are reserved in Vue .

Answer 8

Creating a computable property for something like this is a bit overkill.

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