Trying to understand v-bind within v-for

Take the below code as an example:

.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 },
    ],
  };
}

Assuming the fav: book.isFav is a ternary operator and the {} in {fav: book.isFav} is a way of grouping similar to a function, then why:

1. Is it not required on :id="this.code + '-' + index"?

2. Does it give an error when id is changed to use it like so: :id="{this.code+'-'+index}"

   I get the following error in the console where it complains about the dot in this.code so this is out of scope

   Error parsing JavaScript expression: Unexpected token '.'
   

I finally understand my mistake. Thank you all for your efforts and the clarifications. I misunderstood the JS Object as a function of Vue. I now understand that an object is passed to the v-bind :class and then takes the Boolean value of isFav to determine if the class fav is to be attached or not. Thank you all again for sharing your expertise.