[Vue warn]: Property or method “hp” is not defined on the instance but referenced during render

Question

I have the following code:

var example1;
var hp = ["p"];

document.addEventListener("DOMContentLoaded", function(event) {
  hp = ["x"];
  example1 = new Vue({
    el: '#example-1', //yes i have an element with #example-1 (not relevant here)
    data: {
      iLoveMyself: window.hp
    },

    watch: {
      iLoveMyself: {
        deep: true,
        immediate: true,
        handler (val, oldVal) {
          console.log("yeeeh")
        }
      }
    }
  })
});

I tried many things (that's why my code ^ is so damn ugly) but i keep this console.error:

vue.js:634 [Vue warn]: Property or method "hp" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

If i look up the value in the chrome plugin for VueJs the the data set is as followed:

iLoveMyself:Array[1]
0:"x"

All good so far but when trying to update hp like:

hp.push("y");
hp.pop();
hp = "ZEBRA";

I get no response what so ever.

What is that i don't understand ?

Gratitude in advance!

Edit: So after all i start to gather to pieces, my html is important after all :/

<div id="example-1">
  <div v-for="ev in hp" :key="ev.beavus">
    {{ ev.beavus }}
  </div>
</div>

The error indicates that you're trying to use a property called hp in your template. However, you haven't defined a property called hp on your Vue instance. In the example code you have a property called iLoveMyself. You have a variable called hp but that won't be accessible within the template, even if it is global. It needs to be a property of the instance or the template won't be able to see it. — skirtle
v-for="ev in hp" references hp. You need to change it to iLoveMyself to match the property on the instance. Either that or rename iLoveMyself to hp. — skirtle

skirtle skirtle · Accepted Answer · 2020-03-10T22:30:24

Here is a more idiomatically Vue implementation of what you posted in the question:

new Vue({
  el: '#example-1',

  data: {
    iLoveMyself: [{beavus: "x"}]
  },

  watch: {
    iLoveMyself: {
      deep: true,
      immediate: true,
      handler (val, oldVal) {
        console.log("yeeeh")
      }
    }
  },
  
  methods: {
    add () {
      this.iLoveMyself.push({beavus: Math.random()})
    }
  }
});

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="example-1">
  <div v-for="ev in iLoveMyself" :key="ev.beavus">
    {{ ev.beavus }}
  </div>
  <button @click="add">Add</button>
</div>

I've got rid of the global variables, there's now just an instance property called iLoveMyself that holds the array. Pushing extra data to the array triggers both the watch and updates the DOM with the new data.

[Vue warn]: Property or method “hp” is not defined on the instance but referenced during render

2 Answers