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.
- [Vuejs]-How to use mocking for test uploading file with jest
- [Vuejs]-Vue 3 options api, how to scroll to an anchor via ID