Below is the code snippet that I am currently working with:
var example1;
var hp = ["p"];
document.addEventListener("DOMContentLoaded", function(event) {
hp = ["x"];
example1 = new Vue({
el: '#example-1',
data: {
iLoveMyself: window.hp
},
watch: {
iLoveMyself: {
deep: true,
immediate: true,
handler (val, oldVal) {
console.log("yeeeh")
}
}
}
})
});
I've attempted various solutions which resulted in the following 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
When checking the value using a Chrome plugin for VueJs, the data set appears as follows:
iLoveMyself:Array[1]
0:"x"
Everything seems fine up to this point, however, when attempting to update hp using the following commands:
hp.push("y");
hp.pop();
hp = "ZEBRA";
No response is received.
What could be the issue that I'm failing to grasp?
Appreciate any help in advance!
Edit: It turns out, after all, that my HTML structure is crucial :(
<div id="example-1">
<div v-for="ev in hp" :key="ev.beavus">
{{ ev.beavus }}
</div>
</div>