how can I display vue data to Laravel blade? - laravel

Question

I have a project with Laravel + vue.js.
I made a vue component and it takes some data from a controller.
I wanted to display the data in the view using v-for, but nothing is displaying.
vue template code
<template>
<div v-for="val in expiredIos" class="card col-xs-12 col-md-5 col-lg-2 m-1 p-0 d-inline-block">
<div class="mx-0 p-2 text-truncate" style="width:10rem;vertical-align:middle;">
{{ val.app_name }}
</div>
</div>
...
</template>
vue script part
export default {
data: function() {
return {
expiredIos: []
}
},
mounted() {
console.log("expired here");
this.getExpiredIosData();
},
methods: {
getExpiredIosData: function() {
axios.post('/expired')
.then(response => {
for (var i = 0; i < response.data.length; i++) {
this.expiredIos[i] = response.data[i];
console.log(this.expiredIos[i]);
}
});
}
},
}
The result of console.log
{app_name: "app1", app_id: "migunstyle", ios_dev_exp: "2019-01-16"}
{app_name: "app2", app_id: "jcalling", ios_dev_exp: "2019-02-19"}
{app_name: "app3", app_id: "modoobebe", ios_dev_exp: "2019-03-08"}
{app_name: "app4", app_id: "babyfactory", ios_dev_exp: "2019-03-19"}
{app_name: "app5", app_id: "merrygirl", ios_dev_exp: "2019-03-21"}
...
What did I wrong here?

Answer 1

Try setting the entire array to the data property directly.
getExpiredIosData: function() {
axios.post('/expired')
.then(response => {
this.expiredIos = response.data; // <-- Set property directly
});
}
Vue tracks all data properties, but tracking array changes is something it cannot do. You need to either use the build in array manipulation functions or replace the array entirely for vue to pick up the change.
https://v2.vuejs.org/v2/guide/list.html#Array-Change-Detection