我的Vue组件由以下代码组成:
<script>
export default {
data() {
return {
sailNames: []
}
},
methods: {
showName: function(e) { // [3] called by @click event from DOM
console.log(this.sailNames); // [4] shows: [__ob__: Observer]
},
getJsonData() { // [1] called on created() hook
$.getJSON("./src/res/sails.json", function(data) {
const sailNames = [];
$.each(data, function(i, names) {
sailNames.push(names);
});
this.sailNames = sailNames;
console.log(this.sailNames);
console.log(sailNames); // [2] both logs give the same output
});
}
}
}
(...)
我想知道,为什么我在点[4]处记录状态时会得到[__ob__: Observer]
。如您所见,数组在data
部分中定义,然后从局部变量获取值并进行检查:局部变量和全局变量都相同(点[2])。
然后,当用户点击分配了showName
方法的元素时(pt。[3]),我希望看到与pt相同的输出。 [2],而是[__ob__: Observer]
出现在控制台中。
那里发生了什么?我应该如何调用数组来获取其值?
答案 0 :(得分:2)
箭头函数表达式的语法短于函数表达式,并且没有自己的this,arguments,super或new.target。尝试用箭头函数替换函数表达式。
<script>
export default {
data() {
return {
sailNames: []
}
},
methods: {
showName(e){
console.log(this.sailNames);
},
getJsonData() {
$.getJSON("./src/res/sails.json", (data) => {
const sailNames = [];
$.each(data, function(i, names) {
sailNames.push(names);
});
this.sailNames = sailNames;
});
}
}
}
</script>