VueJS ReferenceError: bookz is not defined

Question

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)" 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>

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

Cannot reproduce. Please provide a [mcve]. – str Dec 05 '22 at 12:17 — str, Dec 05 '22 at 12:17

score 1 · Answer 1 · answered Dec 05 '22 at 12:17

1

You're probably looking for something like this

<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>

Here is a demo.

answered Dec 05 '22 at 12:17

kissu

40,416
14
65
133

I have done this. I mean a similar one and yes it works but when they are in separate files, ReferenceError occurs. – Ert51 Dec 05 '22 at 12:36
@Ert51 gonna need more details here. You need to import it properly. – kissu Dec 05 '22 at 12:43
Honestly I cannot give further details. But the code blocks I sent are exactly how they look. HTML part is in pages while vuejs part is in a file saved as js. If I write the code like you did, yes the way you wrote works but I am supposed to place the vuejs in js file in other directory you see. Then make it functional. It is really weird that I can run the exact same code in script tags but not in vueJS. Also bookz has 3 objects in it, and I actually see 3 options but inside are either empty or I get this ReferenceError – Ert51 Dec 05 '22 at 17:40
@Ert51 first off, if you can use `.vue` file, do it. Will make your life easier, remove some limitations and be overall more efficient. The snippets you shared are lacking context, so we cannot really move forward with what you sent me. Same, not being able to give further details or a [repro] is pretty much a blocker for further debugging on my side. If you want to import a JSON object, some JS helper, or whatever, that should work without any other issues. Then, it's a matter of navigating inside of your project and get the help of your other tools. – kissu Dec 05 '22 at 17:53
Okay thank you I'll follow the instructions next time. And try the things you advised. – Ert51 Dec 06 '22 at 06:27

score 0 · Accepted Answer · answered Dec 12 '22 at 13:41

I found what my mistake was. I simply forgot the to bind the Vuejs code with the HTML part, I added a div with class name of the el CSS selector in my Vue code and now it is working functionally. ( added the name in el:"#app" in Vue component into div class)

<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>

VueJS ReferenceError: bookz is not defined

2 Answers2