LaravelAPI-從Json顯示的Vuejsaxios

我仍在學習 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 時處理這兩個問題。先感謝您。

uj5u.com熱心網友回復：

我想這是你的結構

$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;

  });

我希望它有幫助

uj5u.com熱心網友回復：

return response()->json({ "product": $product, "product_materials": $product_materials });

uj5u.com熱心網友回復：

您可以通過簡單地在相應的資料屬性中分配回應資料然后將其系結到模板中來實作它。

作業演示：

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>

標籤：拉拉维尔 Vue.js

上一篇：如何在Vue3js中實作非父子組件之間的雙向系結

下一篇：單頁應用程式網站上是否只有1個HTML頁面(index.html)？