У меня есть компонент-обертка, который предоставляет дочерним элементам вызовы API и сохраняет результат, и компонент списка, который показывает запрошенные элементы, переданные через prop.Проблема в том, что он показывает их в режиме разработки, но не в рабочем состоянии, хотя вызов API в обоих случаях работает нормально, а ответ правильный.
Оба режима я запускал в одной среде.Похоже, проблема реактивности.
Это код шаблона:
<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:
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);
}
}
Я ожидаю, что result.data
в компоненте VueAPI будетотображается как элементы списка в разработке и в рабочих режимах, но только в режиме разработки.