Question

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

Answer 1

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

Vue不会在生产模式下更新由API调用加载的组件prop，但会在开发中进行更新

1 个答案: