Laravel API - Vue js axios 从 Json 显示

Question

我仍在学习 Vue Js 并尝试使用 Laravel API 来实现。

在产品控制器中，当我传递 return response()->json($product); 并在 Vue Js 中显示时，它可以工作。但是当我做了两个 - return response()->json([$product, $product_materials]);

我无法显示

<template>
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <table class="table table-bordered table-striped">
        <tbody>
          <tr style="height: 23px">
            <td style="width: 75px; height: 23px" colspan="5">
              Product Details
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 15.5px; height: 23px">ID</td>
            <td style="width: 14.5px; height: 23px">{{ product.id }}</td>
            <td style="width: 45px; height: 23px" colspan="3">&nbsp;</td>
          </tr>
          <tr style="height: 43px">
            <td style="width: 15.5px; height: 43px">Name</td>
            <td style="width: 14.5px; height: 43px">{{ product.name }}</td>
            <td style="width: 15px; height: 43px">Quantity</td>
            <td style="width: 30px; height: 43px" colspan="2">
              {{ product.quantity }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 15.5px; height: 23px">Description</td>
            <td style="width: 59.5px; height: 23px" colspan="4">
              {{ product.description }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 75px; height: 23px" colspan="5">
              Product Material
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 15.5px; height: 23px">ID</td>
            <td style="width: 14.5px; height: 23px">Description</td>
            <td style="width: 15px; height: 23px">Quantity</td>
            <td style="width: 15px; height: 23px">Rate</td>
            <td style="width: 15px; height: 23px">Amount</td>
          </tr>
          <tr
            style="height: 23.5px"
            v-for="product_material in product_materials"
            :key="product_material.id"
          >
            <td style="width: 15.5px; height: 23.5px">
              {{ product_material.id }}
            </td>
            <td style="width: 14.5px; height: 23.5px">
              {{ product_material.description }}
            </td>
            <td style="width: 15px; height: 23.5px">
              {{ product_material.quantity }}
            </td>
            <td style="width: 15px; height: 23.5px">
              {{ product_material.rate }}
            </td>
            <td style="width: 15px; height: 23.5px">
              {{ product_material.amount }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">
              Total Material Items
            </td>
            <td style="width: 15px; height: 23px">
              {{ product.material_items }}
            </td>
            <td style="width: 15px; height: 23px">Material Cost</td>
            <td style="width: 15px; height: 23px">
              {{ product.material_cost }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">Waste %</td>
            <td style="width: 15px; height: 23px">
              {{ product.waste_percentage }}
            </td>
            <td style="width: 15px; height: 23px">Waste Amount</td>
            <td style="width: 15px; height: 23px">
              {{ product.waste_amount }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">Labour cost %</td>
            <td style="width: 15px; height: 23px">
              {{ product.labour_percentage }}
            </td>
            <td style="width: 15px; height: 23px">Labour Cost</td>
            <td style="width: 15px; height: 23px">
              {{ product.labour_amount }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">&nbsp;</td>
            <td style="width: 30px; height: 23px" colspan="2">
              Equipment Cost
            </td>
            <td style="width: 15px; height: 23px">
              {{ product.equipment_cost }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">Other Cost %</td>
            <td style="width: 15px; height: 23px">
              {{ product.other_percentage }}
            </td>
            <td style="width: 15px; height: 23px">Other Cost</td>
            <td style="width: 15px; height: 23px">
              {{ product.other_amount }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="2">Margin %</td>
            <td style="width: 15px; height: 23px">
              {{ product.margin_percentage }}
            </td>
            <td style="width: 15px; height: 23px">Margin Amount</td>
            <td style="width: 15px; height: 23px">
              {{ product.margin_amount }}
            </td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="3">&nbsp;</td>
            <td style="width: 15px; height: 23px">Sub Total</td>
            <td style="width: 15px; height: 23px">{{ product.sub_total }}</td>
          </tr>
          <tr style="height: 23px">
            <td style="width: 30px; height: 23px" colspan="3">&nbsp;</td>
            <td style="width: 15px; height: 23px">Total</td>
            <td style="width: 15px; height: 23px">{{ product.amount }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
 
<script>
export default {
  mounted() {
    console.log("Component mounted.");
  },
  data() {
    return { product: {}, product_materials: [] };
  },
  created() {
    this.axios
      .get(`/api/products/calculate/${this.$route.params.id}`)
      .then((res) => {
        this.product = res.data;
      });
  },
};
</script>

我只想知道如何解决这个问题，并在通过 json 时处理这两个问题。提前谢谢你。

Answer 1

return 响应()->json({ “产品”：$产品， “product_materials”：$product_materials });

Answer 2

我假设这是你的结构

$product =
    [
        'id' => 1,
        'name' => 'product1',
    ];
$product_materials = [
    [
        'id' => 1,
        'name' => 'materials1',
    ],
    [
        'id' => 2,
        'name' => 'materials2',
    ]
];
return response()->json(['product' => $product, 'materials' =>  $product_materials]);

之后axios请求应该是这样的

this.axios
  .get(`/api/products/calculate/${this.$route.params.id}`)
  .then((res) => {
    this.product = res.data.product;
    this.product_materials = res.data.materials;

  });

希望对您有所帮助

Answer 3

您只需在相应的数据属性中分配响应数据，然后将其绑定到模板中即可实现。

工作演示：

new Vue({
  el: '#app',
  data: {
    product: {},
    product_materials: []
  },
  mounted() {
    const apiResponse = [{
      "id": 5,
      "name": "Bed",
      "description": "Single",
      "quantity": 1
    }, {
      "7": {
        "id": 8,
        "product_id": 5,
        "description": "Wood"
      },
      "8": {
        "id": 9,
        "product_id": 5,
        "description": "Mattress"
      }
    }];
    
    apiResponse.forEach((obj) => {
        if (obj.hasOwnProperty('name')) {
        this.product = obj
      } else {
        Object.keys(obj).forEach((objKey) => {
            this.product_materials.push(obj[objKey])
        })
      }
    });
    
    console.log('this.product', this.product);
    console.log('this.product_materials', this.product_materials);
  }
})

table, th, tr, td {
  border: 1px solid black;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h3>Product Details</h3>
  <p> {{ product.name }} </p>
  <p> {{ product.description }} </p>
  <p> {{ product.quantity }} </p>
  
  <h3>Product Material Details</h3>
  <table>
    <tr>
      <th>Product ID</th>
      <th>Description</th>
    </tr>
    <tr v-for="item in product_materials" :key="item.id">
      <td>{{ item.product_id }}</td>
      <td>{{ item.description }}</td>
    </tr>
  </table>
</div>

Laravel API - Vue js axios 从 Json 显示

Laravel API - Vue js axios to display from Json

laravel

vue.js