[Vuejs]-Return different values from computed Vue

0👍

Make buttonText a method instead, so you can put {{ buttonText(dates[0]) }} and {{ buttonText(dates[0]) }}.

As in the Vue docs on computed properties:

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. A computed property will only re-evaluate when some of its reactive dependencies have changed.

Your two v-btn elements aren’t evaluated with different scopes, so there’s no reason for Vue to believe that buttonText will have different values in both cases. What you want conceptually is for buttonText to return different values based on the date you pass in, which fits much closer to a method as far as Vue is concerned.

As on the methods page of the guide:

It is also possible to call a method directly from a template. As we’ll see shortly, it’s usually better to use a computed property instead. However, using a method can be useful in scenarios where computed properties aren’t a viable option.

Leave a comment