In vue.js 2.0 I'm trying to make a compute a class like this:
<li :class="'str1' calcStarClass(1, p.rtg)"> </li>
And in methods I have:
methods: {
calcStarClass(starNum, rating) {
switch (starNum) {
case 1:
switch (rating) {
case (rating == 0):
return "str"
break;
case (0 < rating < 1):
return "strh"
break;
case (rating >= 1):
return "strf"
break;
default:
return "strf"
}
break;
case 2: ...
But I get this error:
Raw expression: :class="'str1' calcStarClass(1, p.rtn)"
When I try <li v-bind:class="'str1' calcStarClass(1, p.rtg)"> instead, I get this error:
invalid expression: Unexpected identifier in
'str1' calcStarClass(1, p.rtg)
Raw expression: v-bind:class="'str1' calcStarClass(1, p.rtg)"
I'm wondering what casuse this error and how can I fix it?
When you use v-bind, it expects a valid javascript expression, but 'str1' calcStarClass(1, p.rtg) is not a valid javascript expression. Use + to concatenate multiple classes if that's what you need:
<li :class="'str1 ' + calcStarClass(1, p.rtg)">
you could update it like this one
<li :class="['str1', calcStarClass(1, p.rtg)]">
Another way
<li class="str1" :class="calcStarClass(1, p.rtg)">