0
122
ViewsUndefined data variable Vue.js when using axios
this is driving me nuts.
I'm assigning the value from an axios response to my vue data like this:
mounted() {
axios
.get('/campaigns/new.json')
.then(response => (
this.kits = response.data[0].kits,
)
)
I can see with vue developer tools that my this.kits has an array of 8 items (correct)
When I try to use this.kits afterwards or do console.log(this.kits), I get undefined or empty array.
What the hell am I missing? Please help. Thank you
mounted() {
axios
.get('/campaigns/new.json')
.then(response => (
this.kits = response.data[0].kits,
this.kitProducts = response.data[0].kitproducts,
this.products = response.data[0].products,
this.boxes = response.data[0].boxes,
this.categories = response.data[0].categories,
this.extras = response.data[0].extras,
this.isCurrentUser = response.data[0].user,
this.giftpacks = response.data[0].giftpacks
)
)
console.log(this.kits)
console.log(this.kits) will output:
·
Santiago Trujillo
2 answers
Answer question0
your console.log is being executed right after the promise request is initiated, you would have to place it at the end inside the then block or, as Nicola says, use async await
try this:
async mounted() {
const response = await axios.get('/campaigns/new.json')
this.kits = response.data[0].kits
this.kitProducts = response.data[0].kitproducts
this.products = response.data[0].products
this.boxes = response.data[0].boxes
this.categories = response.data[0].categories
this.extras = response.data[0].extras
this.isCurrentUser = response.data[0].user
this.giftpacks = response.data[0].giftpacks
console.log(this.kits)
}
·
Santiago Trujillo
Report
0
Try to wait for your data. Move the API call to method:
methods: {
async getData() {
const res = await axios.get('/campaigns/new.json')
this.kits = res.data[0].kits,
}
}
and then in mounted hook:
async mounted() {
await this.getData()
console.log(this.kits)
}
·
Santiago Trujillo
Report
Answer question