In my project, I have a wrapper component that handles API calls and stores the results for the children components. I also have a list component that displays the items passed in as props. The strange issue I am facing is that the list items show up in development mode, but not in production. However, the API call is successful in both cases and the response is correct.
Both development and production modes were tested in the same environment, leading me to suspect that it might be a reactivity problem.
Below is a snippet of the template code:
<vue-api>
<vue-list-filter-synchronizer slot-scope="{ result, getPrograms }"
...
@params-updated="getPrograms">
...
<div class="content">
<vue-list :items="result ? result.data : []"
.../>
</div>
</vue-list-filter-synchronizer>
</vue-api>
VueAPI component:
const VueAPI = {
data() {
return {
result: null,
error: null,
loading: false
}
},
...
methods: {
getPrograms(params) {
this.query(services.getPrograms)([params]);
},
query(f) {
return (args=[]) => {
if (!this.loading) {
this.loading = true;
f(...args)
.then(({ data }) => this.result = data)
.catch(error => this.error = error)
.finally(() => this.loading = false);
}
}
},
render() {
return this.$scopedSlots.default(this.slotScope);
}
}
I am hoping to see the data from result.data in the VueAPI component displayed as list items in both development and production modes. However, this is currently only happening in development mode.