Vue js appがアプリケーション内で定義されていません

Question

hueページのスクリプトタグにvue 1.0.18 min.jsを含めました。

specialText行は機能しません。

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 "+ tagApp.chars[0].blockVal +" 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); 
} 

私もspecialTextの内側に次のことを試してみた：

this.blockValは未定義与えます。

this.parent.blockValは未定義です。

this.chars[0].blockValには、charsは定義されていません。

tagApp.chars[0].blockValと言うと、tagAppは未定義です。

助けてください。

Answer 1

dataプロパティで値を直接更新することはできません。 Vue.js v1のライフサイクルフック、https://v1.vuejs.org/guide/instance.html#Lifecycle-Diagramについて、データオブジェクトを更新するために

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

をcreatedライフサイクルフックメソッドを使用します。他のライフサイクルフックを取り付けることもできます。

Answer 2

tagApp.charsオブジェクトは定義内に使用できません。そのため、定義されていません。文字の定義から行tagApp.chars[0].blockValを削除すると、すべてが機能します。 "まだ定義されている変数の値は使用できません"。

次のコードを実行した場合、それは動作します：

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); 
}