Как я могу отобразить данные Vue на лезвие Laravel?

Question

У меня есть проект с Laravel + vue.js.Я сделал компонент VUE, и он берет некоторые данные из контроллера.Я хотел отобразить данные в представлении, используя v-for, но ничего не отображается.

код шаблона vue

<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

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]);
          }
      });
    }
  },
}

Результат 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"}
...

Что я тут не так сделал?

Answer 1

Попробуйте установить весь массив непосредственно в свойстве data.

getExpiredIosData: function() {
  axios.post('/expired')
  .then(response => {
      this.expiredIos = response.data; // <-- Set property directly
  });
}

Vue отслеживает все свойства данных, но отслеживание изменений массива - это то, что он не может сделать.Вам нужно либо использовать встроенные функции манипулирования массивом, либо полностью заменить массив для vue, чтобы получить изменение.

https://vuejs.org/v2/guide/list.html#Array-Change-Detection