I have an ES Lint Parsing Error in my Vue page. This is occurring because my parameter I am passing to the method contains a "." symbol.
Error - Syntax Error: Unexpected token (1:1628)
<div class="text-sm font-medium" v-bind:class="{ highlight(coin.price_change_percentage_24h) }">
What is the solution to this syntax? Is there a way to escape this in the template file?
Full code can be found here
Thanks in advance for any help!
Define highlight as a computed property which returns a function that takes the price as parameter :
computed:{
highlight(){
return (priceChange)=>{
if(priceChange < 0)
{
return 'text-red-900'
}
if(priceChange > 0)
{
return 'text-green-900'
}
return '';
}
}
},
and bind it to the class without using {} :
<div class="..." v-bind:class="highlight(coin.price_change_percentage_24h)">