Revision
This snippet of Component.vue was extracted from a larger web application where I made a mistake that had significant consequences, all because of a small change I didn't initially notice.
An important distinction exists between the following code snippets:
mounted() {
// ....
}
and:
mounted: () => {
// ....
}
Upon a thorough review this morning, I identified this error in my coding and have rectified the question to accurately represent the faulty code.
Inquiry
Although fatigue might be clouding my judgment, before retiring for the night, I'm seeking assistance here to pinpoint the issue. A basic Vue component seems to be malfunctioning:
Component.vue:
<template>
<div>
<p v-for="item in items">{{ item.text }}</p>
</div>
</template>
<script>
export default {
data() {
return {
items: []
};
},
mounted: () => {
var _this = this;
$.ajax("/items.json").done(result => {
_this.items = result;
});
}
};
</script>
items.json
[
{"text": "ABC"},
{"text": "XYZ"}
]
The paragraphs are failing to render. Upon inspection, it appears that _this.items is undefined prior to its assignment in the AJAX handler (with an expected empty array), and _this.$data is also nonexistent.
~Does the context of this differ when used in the mounted method compared to elsewhere in Vue?~ Or did I overlook a simple mistake?
By implementing the mounted function with a colon, there's a shift in the value of this. Why does this alteration occur?