Я все еще изучаю Vue Js и пытаюсь реализовать с помощью API Laravel.
В Product Controller, когда я передаю 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"> </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"> </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"> </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"> </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.info("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. Заранее спасибо.
@mcanzerini Я получаю это так [ { "id": 5, "name": "Кровать", "description": "Single", "quantity": 1, }, { "7": { "id": 8, "product_id": 5, "description": "Дерево" }, "8": { "id": 9, "product_id": 5, "description": "Матрас" } } ] (Удалены данные для соответствия характеру лимит)
это два объекта, а не массивы
извините, мой плохой, как я могу это исправить и решить проблему?
@mcanzerini я изменил в контроллере, чтобы он возвращал response()->json(['product'=>$product,'product_materials'=>$product_materials]); Затем, когда я показываю продукт, {{product.product.name}}
это работает, но не может зацикливать материалы продукта. Проходящие данные: { product: {}, product_materials: [{}]}
вернуть ответ () -> json ({ "продукт": $продукт, "продукт_материалы": $product_materials });
Это не работает, выдает ошибку "неожиданный { перед "продуктом"" Вместо этого я сделал это return response()->json(['product'=>$product,'product_materials'=>$product_materials]);
не повезло
попробуйте это: response() -> json(array('product' =>$product,'product_materials' =>$product_materials))
Я сделал это, но он не будет отображать материалы продукта в цикле.
попробуйте это: response () -> json (array (['product' => $ product, 'product_materials' => $ product_materials]))
Я предполагаю, что это ваша структура
$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;
});
Я надеюсь, что это полезно
Nvm, я чувствую себя таким тупым из-за того, что все проверил и пропустил одну строчку. Большое спасибо, это работает!
@Faizan, все в порядке, эти вещи могут быть сложными
Теперь я получаю другую проблему.. для /product_details/1 я получаю product: {} и product_materials как [{}], что нормально, но для других, скажем, /product_details/5, я не получаю то же самое.. Я делаю динамические вычисления, поэтому это влияет на это. Я получаю product {} и product_materials {"some number"{}} не как массив
Вы можете добиться этого, просто назначив данные ответа в соответствующих свойствах данных, а затем привязав их в шаблоне.
Рабочая демонстрация:
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.info('this.product', this.product);
console.info('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>
Здравствуйте, return response() -> json(array('product' =>$product,'product_materials' =>$product_materials));
когда я запускаю /product_details/1, я получаю product: {}, product_materials:[{}], что нормально, но для других идентификаторов /product_details/2 или /product_details/3 я получаю product: {}, product_materials : {"7"{}}.. почему меняется? Я делаю динамические вычисления и когда значения проходят по-разному. это влияет на это
Какова структура двух массивов?