VueJS ReferenceError: bookz is not defined-CodePudding

I have a problem that when I assign a variable in the correct way in .js file with Vue js format and in the html file when I try to use it I get ReferenceError: bookz is not defined. Before I have written the exact same thing as in <script> tags, it was working. But now with this new variable it cannot run. In addition, when I use the old variable with different data it still shows the previous data.

VueJS part

const app = new Vue({
 data: {
    bookz: [
            {id:1 , title: "AAAA"},
            {id:2 , title: "BBBB"},
            {id:3 , title: "CCCC"},
           ],
       }
}

HTML part

<select @change="onChange($event)"  v-model="bookz.title">
   <option>---Select a book---</option>
   <option v-for="b in bookz" v-bind:value="b.id">${b.title}}</option>
</select>

I am trying to get a select with options from data in the vuejs part.

CodePudding user response：

You're probably looking for something like this

<template>
  <div>
    <p>selected: {{ selectedBook }}</p>
    <select v-model="selectedBook" >
      <option>---Select a book---</option>
      <option v-for="b in bookz" :key="b.id" :value="b.title">
        {{ b.title }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookz: [
        { id: 1, title: 'AAAA' },
        { id: 2, title: 'BBBB' },
        { id: 3, title: 'CCCC' },
      ],
      selectedBook: '',
    }
  },
}
</script>

Here is a demo.