VueJS：为什么我不能<app-name><variable>从任何地方打电话给 .

Question

好的。彻底的重述，因为人们总是陷入与问题无关的事情中。所以我把它归结为最小的精华：

<script src='_js/vue.2.6.11.js'></script>
<div id="app">
<h1>{{ email }}</h1>
<h1>{{ email[reportID] }}</h1>
<hr>
<button @click='makeItGo'>CLICK</button>
</div>
<script>
var vm = new Vue ({
el: '#app',
data: {
email: [],
reportID: 40,
info: 'this is info',
},
methods: {
makeItGo() {
vm.email.push(vm.reportID);
vm.email[reportID] = info;    <-- this doesn't work.  WHY?
vm.email[reportID].push(info);   <-- this doesn't work either.  WHY?
}
},
});
</script>

这将产生以下错误：

[Vue warn]: Error in v-on handler: "ReferenceError: reportID is not defined"
(found in <Root>)
ReferenceError: "reportID is not defined"
makeItGo http://localhost/project/test.php line 669 > scriptElement:27
invokeWithErrorHandling http://localhost/project/_js/vue.2.6.11.js line 669 > scriptElement:1863
invoker http://localhost/project/_js/vue.2.6.11.js line 669 > scriptElement:2188
_wrapper http://localhost/project/_js/vue.2.6.11.js line 669 > scriptElement:7547

令人沮丧的是：为什么它声明"reportID"是未定义的，而它显然是未定义。为什么直接调用它(vm.email与电子邮件(没有像我预期的那样绕过任何范围界定问题(这似乎是问题所在(？在PHP中，这种情况根本不会发生，所以我很困惑。

我所要做的就是动态地构建一个嵌套数组。从那里，一个短暂的跳跃，使其联想。。。我希望。

email
└ 40
└ 'this is info'

Answer 1

在方法的顶部提升this

let that = this;

然后在整个方法中使用CCD_ 3而不是CCD_。这样你就可以在每个方法中保留作用域。