Vue js 函数 countSubcategories() 返回 [object Promise]

Question

countSubcategories() 函数返回 [object Promise]，它应该返回映射子类别的行数。

此代码在 vue.js 和 Laravel 中，对此有何建议？

<div v-for="(cat,index) in cats.data" :key="cat.id">

  {{  countSubcategories(cat.id) }}  // Here subcategories row counts should be displayed.

 </div>


 <script>
export default {
  data() {
    return {
      cats: {},
      childcounts: ""
    };
  },

  created() {
    this.getCategories();
  },

  methods: {
    countSubcategories(id) {
      return axios
        .get("/api/user-permission-child-count/" + `${id}`)
        .then(response => {
          this.childcounts = response.data;
          return response.data;
        });
    },

    getCategories(page) {
      if (typeof page === "undefined") {
        page = 1;
      }
      let url = helper.getFilterURL(this.filterpartnerForm);
      axios
        .get("/api/get-user-permission-categories?page=" + page + url)
        .then(response => (this.cats = response.data));
    }
  }
};
</script> 

Answer 1

正如 Aron 在上一个答案中所说，当您直接从模板调用时，在呈现模板时信息尚未准备好。

据我了解，您需要先运行 getCategories，然后才能获取其余数据，对吧？

如果是这样，我有一个建议：

将一组猫 ID 发送到您的后端，在那里您可以发送回您需要的子类别列表，this 和 this 是很好的资源，请阅读。

您可以像这样“合并”而不是拥有 2 个 getCategories 和 countSubcategories：

fetchCategoriesAndSubcategories(page) {
  if (typeof page === "undefined") {
    page = 1;
  }
  let url = helper.getFilterURL(this.filterpartnerForm);
  axios
    .get("/api/get-user-permission-categories?page=" + page + url)
    .then(response => {
      this.cats = response.data;
      let catIds = this.cats.map(cat => (cat.id));
      return this.countSubcategories(catIds) // dont forget to change your  REST endpoint to manage receiving an array of ids 
    })
    .then(response => {
      this.childcounts = response.data
    });
}

Promises 允许您在 .then 方法中返回 Promise 并链接

所以在你的 created() 中你可以调用 this.fetchCategoriesAndSubcategories 来传递你需要的数据。你也可以通过添加一个 v-if 来更新你的模板，这样它就不会在 promise 没有完成加载时抛出错误。像这样：

<div v-if="childCounts" v-for="(subcategorie, index) in childCounts" :key="subcategorie.id">

  {{ subcategorie }}  // Here subcategories row counts should be displayed.

 </div> 

Answer 2

你好！

根据提供的信息，可能是两件事。首先，您可以尝试替换：

return response.data;

与：

console.log(this.childcounts)

如果您记录了正确的信息，请查看控制台。如果不是，可能是你从 Laravel 发送信息的方式。

PS：可能需要更多信息来解决这个问题。你什么时候触发 'countSubcategories' 方法？

Answer 3

我会在组件本身中进行所有初始登录，而不是像那样在模板中调用函数。它会极大地影响应用程序的性能，因为该函数会在更改检测时被调用。但首先，您会收到 [object Promise]，因为这正是您返回的内容，一个 Promise。

如前所述，我会在组件中登录，然后在模板中显示一个属性。所以我建议如下：

methods: {
  countSubcategories(id) {
    return axios.get("..." + id);
  },

  getCategories(page) {
    if (typeof page === "undefined") {
      page = 1;
    }

    // or use async await pattern
    axios.get("...").then(response => {
      this.cats = response.data;
      // gather all nested requests and perform in parallel
      const reqs = this.cats.map(y => this.countSubcategories(y.id));
      axios.all(reqs).then(y => {
        // merge data
        this.cats = this.cats.map((item, i) => {
          return {...item, count: y[i].data}
        })
      });
    });
  }
}

现在您可以在模板中显示{{cat.count}}。

这是一个具有类似设置的示例SANDBOX。

Answer 4

发生这种情况是因为您正在尝试呈现尚未恢复的信息...

尝试在 created 内部更改此方法，使其异步并且不要直接在 HTML 上调用您的方法。他们可以渲染你的变量this.childcounts。