I'm just trying to set data got it from an AJAX call using the built-in fetch()
method into a data variable courts
of my Vue component (I'm using Vue2).
I know that when you are into the fetch()
method, the context of keyword this
can change. However, if I bind the variable courts
as a prop to my child component it gets rendered into the HTML, but still I cannot access to the prop from, for instances, the created()
and mounted()
lifecycle hooks.
I've already read this question which points out the issue about the keyword this
.
Because of the asynchronous workflow of JavaScript, I also check if I obtain the data by using the setTimeout()
method which I do, but not in my child component as a prop.
I have Babel loaded from Webpack and I was trying to sort it out with an async await
function, with no luck.
App.vue (Parent Component)
<template>
<div class="container">
<court-map v-bind:items="courts"></court-map>
<navbar v-bind:items="courts"></navbar>
</div>
</template>
<script>
import CourtMap from './components/CourtMap.vue';
import Navbar from './components/Navbar.vue';
export default {
components: {
'navbar': Navbar,
'court-map': CourtMap
},
data() {
return {
courts: [],
}
},
created() {
this.getCourts();
},
methods: {
getCourts() {
let _self = this;
fetch('/api/courts', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
_self.courts = data; // With alias
this.courts = data;
console.log(_self.courts); // Shows my data
})
.catch(error => console.error(error));
console.log(_self.courts); // No longer shows my data
setTimeout(function() {
console.log(_self.courts); // Shows my data
console.log(this.courts); // Undefined
}, 3000);
}
}
}
</script>
I also use this.$props.items
to access to my prop but it gives me an empty array.
CourtMap.vue (Child Component)
EDIT: Sorry I forgot to use this
within the index of the variable.
<template>
<div class="map-viewer">
<div class="esri-widget">
<camera-info v-bind:camera="camera"></camera-info>
</div>
<div>{{ items }}</div> // Renders the prop with the right data
<div id="viewMap"></div>
</div>
</template>
<script>
import { loadModules } from 'esri-loader';
export default {
components: {
'camera-info': CameraInfo
},
props: {
items: {
type: Array,
required: true
},
},
data() {
return {
firstIndex: 0,
camera: {
position: {
longitude: this.items[this.firstIndex].longitude, // Return this is not defined
latitude: this.items[this.firstIndex].latitude // Return this is not defined
},
tilt: 0,
heading: 0
},
}
},
created() {
},
methods: {
createMap() {
// Some function here
}
},
mounted() {
console.log(this.items); // Doesn't show the data
setTimeout(function() {
console.log(this.items); // Doesn't show the data too
}, 3000);
this.createMap();
},
}
</script>
Index.js (Where I start my Vue App)
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
I guess this is something a novice has to get through, but for that reason I want to know which pattern I have to follow every time I want to acces to a fetched data in Vue. I don't see now how to proceed.
Thanks beforehand for taking your time to read this.