调用使用 v-for 中的信息发出 axios 请求的函数的好方法是啥？

Posted 2023-02-23

【中文标题】调用使用 v-for 中的信息发出 axios 请求的函数的好方法是啥？

【英文标题】：What is a good way to call a function that makes an axios request using information from within a v-for?调用使用 v-for 中的信息发出 axios 请求的函数的好方法是什么？

【发布时间】：2021-07-14 21:28:05

【问题描述】：

我正在使用 Rails 和 VueJS 开发电子商务网站。我有一个组件文件来显示给定用户的订单。我正在使用 v-for 循环来迭代并显示所有用户的订单信息。每个订单都链接到一个购物车产品表，其中产品 I.D.位于。我想在每个订单中显示每个产品的产品信息。我有一个 productShow 函数，它向后端发出 axios 请求并检索产品的信息，问题是我不确定如何从 carted 产品数组中的每个产品中捕获产品 ID 以与请求一起发送。即使我做到了，我将如何在每个订单中显示每个产品以及订单的信息？到目前为止，我的尝试一直不成功，正在寻找一些指导。代码和信息如下。

ordersIndex.Vue 组件：

  <div class="home">
    <h1> message </h1>
    <div  v-for="order in orders">
      <h2>Order Number: order.id </h2>
      <h1 v-for="cartedProduct in order.carted_products"> <strong> cartedProduct </strong> </h1>

      <h3>SUBTOTAL: order.subtotal </h3>
      <h3>TAX: order.tax </h3>
      <h3>TOTAL:  order.total </h3>

    </div>
  </div>
</template>

<style>
</style>

<script>
import axios from "axios";

export default 
  data: function () 
    return 
      message: "Your Orders",
      orders: [],
      anOrder: [],
      cartedProducts: [],
      product: ,
      productId: "",
    ;
  ,
  created: function () 
    console.log("In Created...");
    this.orderIndex();
    // this.cartedProductsonOrder();
  ,

  methods: 
    orderIndex: function () 
      console.log("In orderIndex...");
      axios.get("/api/orders").then((response) => 
        console.log(response.data);
        this.orders = response.data;
        this.cartedProductsonOrder();
      );
    ,
    productShow: function (id) 
      console.log("in products show");
      axios.get("/api/products/" + id).then((response) => 
        console.log(response.data);
        this.product = response.data;
        console.log("Line 53");
        console.log(this.product);
        this.cartedProducts.push(this.product);
        console.log(this.cartedProducts);
      );
    ,
    cartedProductsonOrder: function () 
      console.log("In cartedProductsonOrder method....");
      console.log(this.orders);
      for (let i = 0; i < this.orders.length; i++) 
        console.log("Line 62");
        console.log(this.orders[i].carted_products);
        this.cartedProducts = this.orders[i].carted_products;

        for (let j = 0; j < this.cartedProducts.length; j++) 
          console.log("Line 67");
          console.log(this.cartedProducts[j]);
          console.log(this.cartedProducts[j].product_id);
          this.productId = this.cartedProducts[j].product_id;
          this.productShow(this.productId);
        
      
    ,
  ,
;
</script>

控制台日志截图：

order response

carted products

【问题讨论】：

请将相关代码发布为问题中的代码块而不是图像。 meta.***.com/a/285557/6294072

当您在 v-for 中使用 v-for 时，请尝试创建一个单独的组件以提高可读性。

您可能需要考虑创建一个单独的订单详细信息视图来显示与给定订单关联的已购买产品列表。然后在您的订单列表中，为每个订单创建一个链接，将您带到该订单的详细信息视图。

所以如果我理解正确：你似乎拥有一切，除了每个cartedProduct（其中包含product_id），你必须获取产品信息，对吧？你有一个方法cartedProductsonOrder，但它似乎没有多大作用。恕我直言，您应该遍历 cartedProducts 并为每个获取产品信息并存储它？

@RonaldT 我很感激你的建议。谢谢！

【参考方案1】：

然而，这完全未经测试，它应该让您很好地了解如何完成您所追求的目标。我还进行了一些其他更改，例如使用粗箭头函数并更改为 forEach 循环而不是基本的 for 循环。

<template>
  <div class="home">
    <h1> message </h1>
    <div v-for="order in orders">
      <h2>Order Number: order.id </h2>

      <h1 v-for="product in order.carted_products"> <strong> cartedProduct </strong> </h1>

      <h3>SUBTOTAL: order.subtotal </h3>
      <h3>TAX: order.tax </h3>
      <h3>TOTAL:  order.total </h3>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default 
  data: () => (
    message: "Your Orders",
    orders: [],
    cartedProducts: []
  ),
  mounted: 
    this.doGetOrders()
  ,
  methods: 
    doGetOrders: () => 
      axios.get(`/api/order`).then((response) => 
        this.orders = response.data

        this.doCartedProductsInOrder()
      )
    ,
    doCartedProductsInOrder: () => 
      if (this.order.length >= 1) 
        this.order.forEach((order) => 
          if (order.cartedProducts >= 1) 
            order.cartedProducts.forEach((product) => 
              this.cartedProducts.push(this.doGetProductInfo(productId))
            )
          
        )
      
    ,
    doGetProductInfo: (productId) => 
      axios.get(`/api/products/$productId`).then((response) => 
        if (response.status === 200) 
          return response.data
        
      )
    
  

</script>