Laravel API - аксиомы Vue js для отображения из Json

Я все еще изучаю 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">&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.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 08.04.2022 15:26

@mcanzerini Я получаю это так [ { "id": 5, "name": "Кровать", "description": "Single", "quantity": 1, }, { "7": { "id": 8, "product_id": 5, "description": "Дерево" }, "8": { "id": 9, "product_id": 5, "description": "Матрас" } } ] (Удалены данные для соответствия характеру лимит)

Dynamite 08.04.2022 15:38

это два объекта, а не массивы

mcanzerini 08.04.2022 15:43

извините, мой плохой, как я могу это исправить и решить проблему?

Dynamite 08.04.2022 15:43

@mcanzerini я изменил в контроллере, чтобы он возвращал response()->json(['product'=>$product,'product_materials'=>$‌​product_materials]); Затем, когда я показываю продукт, {{product.product.name}} это работает, но не может зацикливать материалы продукта. Проходящие данные: { product: {}, product_materials: [{}]}

Dynamite 08.04.2022 15:58
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
0
5
46
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

вернуть ответ () -> json ({ "продукт": $продукт, "продукт_материалы": $product_materials });

Это не работает, выдает ошибку "неожиданный { перед "продуктом"" Вместо этого я сделал это return response()->json(['product'=>$product,'product_materials'=>$‌​product_materials]); не повезло

Dynamite 08.04.2022 15:42

попробуйте это: response() -> json(array('product' =>$product,'product_materials' =>$product_materials))

mcanzerini 08.04.2022 15:57

Я сделал это, но он не будет отображать материалы продукта в цикле.

Dynamite 08.04.2022 16:05

попробуйте это: response () -> json (array (['product' => $ product, 'product_materials' => $ product_materials]))

Tony Robin 08.04.2022 16:31
Ответ принят как подходящий

Я предполагаю, что это ваша структура

$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, я чувствую себя таким тупым из-за того, что все проверил и пропустил одну строчку. Большое спасибо, это работает!

Dynamite 08.04.2022 16:08

@Faizan, все в порядке, эти вещи могут быть сложными

Ahmed Hassan 08.04.2022 16:12

Теперь я получаю другую проблему.. для /product_details/1 я получаю product: {} и product_materials как [{}], что нормально, но для других, скажем, /product_details/5, я не получаю то же самое.. Я делаю динамические вычисления, поэтому это влияет на это. Я получаю product {} и product_materials {"some number"{}} не как массив

Dynamite 09.04.2022 12:34

Вы можете добиться этого, просто назначив данные ответа в соответствующих свойствах данных, а затем привязав их в шаблоне.

Рабочая демонстрация:

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"{}}.. почему меняется? Я делаю динамические вычисления и когда значения проходят по-разному. это влияет на это

Dynamite 09.04.2022 12:53

Другие вопросы по теме