При получении данных из API массив Vue.js иногда пуст

Question

Я пытаюсь создать компонент, для работы которого требуется массив объектов. Я передаю его от родителя ребенку, используя реквизит.

Я получаю данные из API с помощью axios.

Поскольку объекты в массиве могут не содержать требуемый ключ "is_selected", я добавляю его к каждому объекту в массиве. Но проблема в том, что массив иногда пуст.

Я перепробовал все, что мог найти. Единственный способ, которым это работает, это со статическими данными.

Я также создал песочницу , и в консоли вы можете видеть, что «КОМПОНЕНТНЫЕ ДАННЫЕ» по какой-то причине являются пустым массивом, но если вы назначаете статические объекты массиву, он работает безупречно

Так вот, что я делаю в своем ребенке:

<template>
 <ul>
 <li v-for="item in items">{{item.title}}</li>
 </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      local_items: this.items
    };
  },
  methods: {},

  created() {
    var result = this.local_items.map(function(el) {
      var o = Object.assign({}, el);
      o.is_selected = false;
      return o;
    });
    this.local_items = result
    console.log('COMPONENT DATA: ', this.local_items);
  }
};
</script>

И это родитель:

<template>
 <test :items="items"></test>
</template>

<script>
import Test from "./Test";
import axios from 'axios'
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {},

  async created () {
    try {
      axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          this.items = response.data
        })
    }catch (e){
      console.log('ERROR: ', e)
    }
  },

  components: {
    Test
  }
};
</script>

Что я делаю не так? Кто-нибудь может привести меня к правильному пути?

Редактировать: Если вы ищете это, рабочий пример находится в песочнице

Answer 1

Публикация комментария как ответа

Проблема здесь в том, что внутри вашего дочернего компонента вы обрабатываете свои данные только один раз , когда дочерний компонент создан и созданный хук жизненного цикла называется.Это здорово, если

• данные передаются непосредственно в компонент при его создании (т. Е. Они жестко запрограммированы, например, когда разметка отображается на стороне сервера) и

• передаваемые данные никогда не меняются.

Но в большинстве случаев вы либо извлекаете данные динамически через Ajax, либо они изменятся во времявремя жизни компонента (или обоих).

В вашем случае вы извлекаете данные динамически из родительского компонента, а затем передаете его вашему дочернему компоненту.Но логика его обработки вызывается только один раз, когда срабатывает событие жизненного цикла created.Так что не повлияет на ваши данные

• , если данные еще не были доступны во время создания компонента (что весьма вероятно, потому что вы не можетепредсказывать, когда вызов Ajax будет завершен) или

• , если данные изменяются в течение срока службы компонента.

Таким образом, вместо того, чтобы подключиться к фиксированномусобытие жизненного цикла, вы можете либо

• запустить собственное событие от родителя, как только оно получит данные и подключится к нему от вашего ребенка (что может стать довольно грязным в более широком масштабе)

• смотреть свойства дочернего компонента для изменений и затем делать то, что необходимо

Так что в основном вы просто хотите позвонитьваша логика из обработчика watch вместо обработчика created:

<script>
export default {
  props: {
    items: {
      type: Array,
      default: []
    }
  },

  data() {
    return {
      local_items: this.items
    };
  },

  watch: {
    /* this is called every time the items prop changes */
    items: function() {

      var result = this.local_items.map(function(el) {
        var o = Object.assign({}, el);
        o.is_selected = false;
        return o;
      });
      this.local_items = result
      console.log('COMPONENT DATA: ', this.local_items);
    }
  }

};
</script>