Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue.js computed property not working

Tags:

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> 
like image 727
adam78 Avatar asked Dec 31 '15 21:12

adam78


People also ask

How do I use computed property in Vue?

In Vue. js, computed properties enable you to create a property that can be used to modify, manipulate, and display data within your components in a readable and efficient manner. You can use computed properties to calculate and display values based on a value or set of values in the data model.

Can you watch a computed property Vue?

Yes, you can setup watcher on computed property, see the fiddle.

Is computed property reactive in Vue?

The Basics of Vue Reactivity Simply put, a computed property's dependencies are the reactive values that help the property that determine the value that is returned. If none of these change, then, again, the cached value will be returned. If no reactive dependency is changed, a computed property is not recalculated.

What is the difference between a computed property and methods in Vue JS?

Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies.


1 Answers

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.

like image 196
Azeame Avatar answered Sep 17 '22 16:09

Azeame