Vue js 应用程序未在应用程序内部定义

Question

我在 html 页面的脚本标签中包含 vue 1.0.18 min.js。

特殊文本行不起作用。

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说字符是未定义的。

tagApp.chars[0].blockVal说tagApp是未定义的。

请帮忙。

Answer 1

不能直接在data属性中更新值。使用created生命周期挂钩方法来更新数据对象，

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

关于 Vue.js v1 生命周期钩子，https://v1.vuejs.org/guide/instance.html#Lifecycle-Diagram。您可以尝试根据您的要求附加其他生命周期钩子

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