how can I display vue data to Laravel blade?

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?

Jerodev Jerodev · Accepted Answer · 2019-09-27T07:54:29

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://vuejs.org/v2/guide/list.html#Array-Change-Detection

how can I display vue data to Laravel blade?

1 Answers