0

我有一个包装器组件，它为子组件提供 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 组件中将显示为开发模式和生产模式中的列表项，但它仅在开发模式下如此。

4

1 回答 1

0

首先，我的 vue.debug.js 有一个旧版本，因此它可以与它一起使用并且不能没有。当我更新它时，问题也出现在调试模式下。其次，问题是我对插槽范围使用了不推荐使用的语法。当我将其更改为 v-slot 语法时，一切都开始按预期工作。

于 2019-06-17T05:30:35.310 回答