Отображение продуктов заказа Vuejs и Laravel

#laravel #vue.js

#laravel #vue.js

Вопрос:

У меня есть приложение Laravel с Vuejs, у меня есть две таблицы: 1-Orders 2-Order_products. Я хочу, чтобы продукты для каждого заказа отображались во всплывающем окне. Вот мой код, заранее спасибо;

Мой контроллер:

 public function getAllOrders()
    {
        return Order::orderBy('created_at', 'DESC')->get();

    }
    public function getOrdersProducts(Order $order)
    {
        return OrderProduct::orderBy('created_at', 'DESC')->get();
    }
  

Мое всплывающее окно

 <v-dialog
            v-model="infoBox"
            width="500"
        >
            <v-card>
                <v-card-title class="headline" primary-title style="background-color:#e91e63;">
                    <span style="color:white;">order #{{OrderIdToView}}</span>
                    <v-spacer></v-spacer>
                    <v-btn text icon color="white" right @click="infoBox = false">
                        <v-icon large>close</v-icon>
                    </v-btn>
                </v-card-title>
                <v-list>
                    <v-chip
                        class="ma-2"
                        color="primary"
                    >

                        Salle: {{ OrderNameToView }}
                        <v-icon right>
                            water_damage
                        </v-icon>
                    </v-chip>
                    <v-chip
                        class="ma-2"
                        color="error"
                    >

                        Total: 23€
                        <v-icon right>
                            monetization_on
                        </v-icon>
                    </v-chip>
                    <v-list-item-group>
                        <template v-for="(orproduct, index) in $store.state.orp">
                        <v-list-item :key="orproduct.id   '-orproduct'">
                                <v-list-item-avatar>
                                    <v-img
                                        src="https://ecocea-bk-cdn-prd.azureedge.net/img/products/e/cc/eccba3e6-e161-4468-8193-577fdfb3205c_@2x"></v-img>
                                </v-list-item-avatar>
                                <v-list-item-content>
                                    <v-list-item-title class="ml-2"><strong>{{ orproduct.id }}</strong></v-list-item-title>
                                </v-list-item-content>
                                <v-list-item-action d-flex>
                                    <div>
                                        <v-chip
                                            class="ma-2"
                                            color="success"
                                            label
                                            text-color="white"
                                        >
                                            2 x<b> 4 €</b>
                                        </v-chip>
                                    </div>
                                </v-list-item-action>

                            </v-list-item>
                            <v-divider
                            ></v-divider>
                            <v-divider
                                v-if="index < $store.state.orp.length - 1"
                                :key="index"
                            ></v-divider>
                        </template>
                    </v-list-item-group>
                </v-list>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="secondary"
                        @click="infoBox = false"
                        class="white--text"
                    >
                        close
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
  

Мой метод:

 methods: {
        moreInfoOrder(orderId, orderName) {
            this.infoBox = true;
            this.OrderIdToView = orderId;
            this.OrderNameToView = orderName;

        }
}
  

У меня есть список заказов, когда я нажимаю на заказ, появляется всплывающее окно с продуктами этого заказа. если кто-нибудь может помочь мне, это было бы здорово,

Спасибо

Ответ №1:

Предполагая, что вы следовали соглашениям Laravel при настройке отношений моделей, getOrdersProducts метод в вашем контроллере должен выглядеть примерно так:

 public function getOrdersProducts(Order $order)
{
    return $order->load('products');
}
  

Что позволяет получить доступ к списку продуктов для конкретного заказа с помощью:

 $order->products