Consider the following code snippet:
.fav { background:”blue”}
<li
v-for="(book, index) in books"
:key="book.title"
:id="this.code + '-' + index"
:class="{fav: book.isFav}"
>
{{book.title}} - {{index}}
</li>
data() {
return {
code: "N54234",
books: [
{ title: "the final empire", isFav: true },
{ title: "the test empire", isFav: false },
{ title: "the first empire", isFav: true },
],
};
}
If we assume that fav: book.isFav uses a ternary operator and the use of {} in {fav: book.isFav} is for grouping similar to a function, then why:
Is it not necessary for
?:id="this.code + '-' + index"Does an error occur when trying to modify
idusing::id="{this.code+'-'+index}"An error is thrown in the console indicating that there is an issue with the dot in
this.code, meaning thatthisis out of scopeError parsing JavaScript expression: Unexpected token '.'