vue.js - dynamically generated component in v-for does not update bound property correctly

The problem is getArtistsLoader does not return data synchronously

const data = getArtistsLoader(release);// data === undefined

so inside the DataLoaderWrapper, it gets undefined for the dataLoader props

Solution

DataLoaderWrapper can accept a promise as data, so it can update when promise resolved.

1. update DataLoaderWrapper to accept promise

I use an async prop to distinguish dataLoader is asynchronous or not

<template>  <div>    <slot :dataLoader="realData"/>  </div></template><script>export default {  props: {    dataLoader: null,    async: Boolean  },  data() {    let realData = this.dataLoader;    if (this.async) {      realData = [];      this.dataLoader        .then(data => {          this.realData = data;        })        .catch(error => {          console.log(error);        });    }    return {      realData: realData    };  }};</script>

2. make getArtistsLoader return promise

function getArtistsLoader(release) {  retrun axios.get('/artists?release=' + release.id)    .then((response) => response.data)}

3. add async prop

<DataLoaderWrapper async :dataLoader="getArtistsLoader(release)">

full demo