[Vuejs]-Vue js app is not defined inside the app

by

0đź‘Ť

âś…

You can’t update values directly in data property. Use created lifecycle hook methods to update data object,

created: function(){
   this.chars[0].specialText = "Passive: Blocks "+ this.chars[0].blockVal +" Damage."
}

About the Vue.js v1 life-cycle hook, https://v1.vuejs.org/guide/instance.html#Lifecycle-Diagram. You can try attaching other lifecycle hooks depends on your requirement

👤Muthu Kumaran

0đź‘Ť

You can’t use the tagApp.chars objects within it’s definition, this is why it is undefined. Remove the line tagApp.chars[0].blockVal from the chars definition and everything will work. “You can’t use a value of a variable if it is still to be defined”.

If you run the following code it works:

var tagApp;

window.onload = function () {
    /* Vue Js App here */
tagApp = new Vue({
  el: '#app',
  data: {
    title: 'Title',
    chars: [{
        name: "Jarred",
        attack: 15,
        health: 70,
        special: "Block",
        blockVal: 5,
        specialText: "Passive: Blocks " + " Damage." 
    // line above: here it doesn't work
    // gives: "can't get chars of undefined"
        }, {
            name: "John"
        }]
     } 
}); // close app
alert(tagApp.chars[0].blockVal); // here it works
getBlockVal(); // here it also works

} // close window.onload

function getBlockVal() {
    var arr = [{
        name: "henry",
        description: "blocks " + tagApp.chars[0].blockVal + " dmg."
    }];
    alert(arr[0].description);
}
👤Alex P.

Leave a comment