我有一个包装器组件,它为孩子提供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);
}
}我希望VueAPI组件中的result.data会在开发模式和生产模式下显示为列表项,但这仅限于开发模式。
发布于 2019-06-17 13:30:35
首先,我的vue.debug.js有一个旧版本,所以它可以和它一起工作,而不是没有它。当我更新它的时候,这个问题也出现在调试模式下。其次,问题是我对slot-scope使用了一个不推荐使用的语法。当我将其更改为v-slot语法时,一切都开始按预期工作。
https://stackoverflow.com/questions/56598655
复制相似问题