Laravel Vue js函数countSubcategories（）返回[对象承诺]

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> 

{{countSubcategories（cat.id）}}//此处应显示子类别行计数。
导出默认值{
数据（）{
返回{
猫：{}，
儿童计数：“
};
},
创建（）{
这个.getCategories（）；
},
方法：{
countSubcategories（id）{
返回轴
.get（“/api/用户权限子计数/”+`${id}`）
。然后（响应=>{
this.childcounts=response.data；
返回响应数据；
});
},
getCategories（第页）{
如果（页面类型==“未定义”）{
page=1；
}
让url=helper.getFilterURL（this.filterpartnerForm）；
axios
.get（“/api/get用户权限类别？page=“+page+url”）
.然后（response=>（this.cats=response.data））；
}
}
};

发生这种情况是因为您试图呈现一个尚未返回的信息

---

尝试在created内部更改此方法，使其异步，并且不要直接在HTML上调用您的方法。您可以将变量

呈现为this.childcounts

您好

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

return response.data;

与：

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

---

PS：可能需要更多的信息来解决这个问题。何时触发“countSubcategories”方法？

正如Aron在前面的回答中所述，当您直接从模板调用时，呈现模板时信息尚未准备就绪

据我所知，您需要先运行getCategories，然后才能获取其余数据，对吗

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

将一组cat ID发送到后端，您可以在那里发回所需的子类别列表，其中一个是很好的参考资料，请阅读

与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
    });
}

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

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

 </div> 

承诺允许您在和链中返回承诺

因此，在created（）中，您可以调用this.fetchCategories和Subcategories来传递所需的数据。此外，您还可以通过添加v-if来更新模板，以便在promise未完成加载时不会引发错误。大概是这样的：

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
    });
}

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

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

 </div> 

{{subcategories}}//此处应显示子类别行计数。

我将在组件本身中完成所有初始登录，而不是在模板中调用这样的函数。它会极大地影响应用程序的性能，因为在检测到更改时会调用该函数。但首先，您得到的是

[对象承诺]

，因为这正是您返回的承诺

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

方法：{
countSubcategories（id）{
返回axios.get（“…”+id）；
},
getCategories（第页）{
如果（页面类型==“未定义”）{
page=1；
}
//或者使用异步等待模式
获取（“…”）。然后（响应=>{
this.cats=response.data；
//收集所有嵌套请求并并行执行
const reqs=this.cats.map（y=>this.countSubcategories（y.id））；
axios.all（需求）。然后（y=>{
//合并数据
this.cats=this.cats.map（（项目，i）=>{
返回{…项，计数：y[i].data}
})
});
});
}
}

现在您可以在模板中显示

{{cat.count}

---

这里有一个类似设置的示例。

dude，如果您尝试在方法上设置一个

async

，并且

在端点的调用中等待
？！