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

之所以发生这种情况是因为您试图呈现尚未返回的信息...

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

Answer 2

你好！

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

return response.data;

具有：

console.log(this.childcounts)

，并在控制台中查看是否已记录正确的信息。如果没有，那可能是您从Laravel发送信息的方式。

PS：可能需要更多信息来解决此问题。什么时候触发“ countSubcategories”方法？

Answer 3

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

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

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

向后端发送一列cat 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
    });
}

Promise允许您在并链接.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 4

我会在组件本身中进行所有初始登录，而不是像这样在模板中调用函数。由于该功能会在更改检测时被调用，因此会严重影响应用程序的性能。但是首先，您会得到[object 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，其设置类似。

Vue js函数countSubcategories（）返回[object Promise]

4 个答案: