Using the same Vue variable in a different place gives error-CodePudding

I have an array with translations that in the root component, this.$root.translations, and the following situation

<div class="fashion-lounge-price ">
     <h6><span v-if="item['service_price_discounted'] > 0">{{
         item['service_price_discounted'] > 0 ? item['service_price']  (item['service_price_max'] > item['service_price'] ? '-'  item['service_price_max'] : '' ) : ''}} 
{{ this.$root.translations['t_lei'] }}</span>

{{item['service_price_discounted'] > 0 ? item['service_price_discounted'] (item['service_price_max'] > item['service_price'] ? '-' ((((item['service_price'] - item['service_price_discounted'])/item['service_price']) * 100)/100) * item['service_price_max'] : '') : item['service_price'] (item['service_price_max'] > item['service_price'] ? '-' item['service_price_max'] : '' )}}
{{ this.$root.translations['t_lei'] }}
 </h6> 
</div>

The first time I use {{ this.$root.translations['t_lei'] }} works without an issue. However, its second occurence (above the </h6>) throws this error: [Vue warn]: Error in render: "TypeError: this is undefined"
However, using it anywhere else in the component, except for that place, doesn't throw any error, and works.

Is there anything I am missing with this?

CodePudding user response：

you don't have to write this in the template area. Remove it and try again please.

With this you can access all methods or reactive data in your script-area. I hope you can learn more about it from the vue docs