VueJS ReferenceError：未定義 bookz

Question

我有一個問題，當我在 884010048688 格式的 .js 文件和 html 文件中以正確的方式分配一個變量時，當我嘗試使用它時，我得到 ReferenceError: bookz is not defined。 在我編寫與 <script> 標記中完全相同的內容之前，它可以正常工作。 但是現在有了這個新變量，它就無法運行了。 此外，當我使用具有不同數據的舊變量時，它仍然顯示以前的數據。

VueJS部分

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

HTML部分

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

我正在嘗試從 vuejs 部分的數據中獲取帶有選項的 select。

Answer 1

你可能正在尋找這樣的東西

<template>
  <div>
    <p>selected: {{ selectedBook }}</p>
    <select v-model="selectedBook" class="form-select form-control">
      <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>

這是一個演示。

Answer 2

我發現我的錯誤是什么。 我只是忘記了將 Vuejs 代碼與 HTML 部分綁定，我在我的 Vue 代碼中添加了一個帶有 class 名稱的 el CSS 選擇器的 div，現在它可以正常工作了。 （將Vue組件中el:"#app"中的name添加到div類中）

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