Vue.js 2中如何在方法内实现循环？

Vue.js 2 端修正 #

1. 正确遍历购物车菜品并补充字段 #

你不能在对象字面量中直接写foreach，这属于语法错误。需要先遍历this.cart数组，为每个菜品补充所需字段后，再构造提交数据。推荐使用Array.map()生成新数组（避免修改原购物车数据）：

submitNewOrder() {
    const restaurantId = this.restaurant.id;
    const order_client = {
        user_id: restaurantId,
        name: this.client.name,
        lastname: this.client.surname,
        address: this.client.address,
        phone: this.client.phone,
        email: this.client.email,
        total: this.total,
    };

    // 遍历购物车，生成包含所需字段的新菜品数组
    const processedDishes = this.cart.map(dish => ({
        ...dish, // 复制原菜品所有字段
        restaurant_id: restaurantId,
        user_id: restaurantId,
        subtotal: dish.price * dish.quantity // 计算小计
    }));

    // 先创建订单，拿到订单ID后再提交菜品关联数据
    axios.post("/api/orders/store", order_client)
        .then(orderResponse => {
            // 从响应中获取新建订单的ID
            const orderId = orderResponse.data.order.id;
            // 为每个菜品添加order_id字段
            const dishesWithOrderId = processedDishes.map(dish => ({
                ...dish,
                order_id: orderId
            }));
            // 提交菜品数据（建议后端单独写接口，比如/api/order-dishes/store）
            return axios.post("/api/order-dishes/store", { dishes: dishesWithOrderId });
        })
        .then(() => {
            this.removeAllFromSession();
            this.hideCheckout();
        })
        .catch(error => {
            console.error("提交失败:", error);
        });
}

2. 修正Axios请求逻辑 #

原代码连续调用.post()会并行发送两个请求，导致菜品提交时还未生成订单ID（后端验证会直接失败）。必须改为串行请求：先创建订单，拿到订单ID后再提交菜品数据。

Laravel 后端修正 #

1. 拆分接口或调整验证逻辑 #

当前store方法同时验证订单和菜品数据不合理，因为订单创建前不存在order_id。推荐拆分两个接口分别处理订单创建和菜品关联：

订单创建接口

public function store(Request $request)
{
    $validatedOrderData = $request->validate([
        'user_id' => 'required|exists:users,id',
        'name' => 'required|max:50',
        'lastname' => 'required|max:50',
        'address' => 'required|max:100',
        'phone' => 'required|max:15',
        'email' => 'required|max:50',
        'total' => 'required|numeric',
    ]);

    $newOrder = Order::create($validatedOrderData);
    
    // 返回订单ID给前端
    return response()->json([
        'success' => true,
        'order' => $newOrder
    ]);
}

菜品关联接口

public function storeOrderDishes(Request $request)
{
    $validatedData = $request->validate([
        'dishes.*.order_id' => 'required|exists:orders,id',
        'dishes.*.dish_id' => 'required|exists:dishes,id',
        'dishes.*.quantity' => 'required|numeric',
        'dishes.*.subtotal' => 'required|numeric',
        'dishes.*.restaurant_id' => 'required|exists:restaurants,id',
    ]);

    // 批量创建订单-菜品关联记录
    foreach ($validatedData['dishes'] as $dish) {
        OrderDish::create([
            'order_id' => $dish['order_id'],
            'dish_id' => $dish['dish_id'],
            'quantity' => $dish['quantity'],
            'subtotal' => $dish['subtotal'],
            'restaurant_id' => $dish['restaurant_id'],
            'user_id' => $dish['user_id']
        ]);
    }

    return response()->json(['success' => true]);
}

可选：合并成一个接口提交所有数据 #

如果希望一次提交订单和菜品数据，可调整前端构造包含完整信息的提交对象：

// Vue中构造提交数据
const submitData = {
    order: order_client,
    dishes: processedDishes
};

axios.post("/api/orders/store", submitData)

后端对应调整验证与逻辑：

public function store(Request $request)
{
    $validatedData = $request->validate([
        'order.user_id' => 'required|exists:users,id',
        'order.name' => 'required|max:50',
        'order.lastname' => 'required|max:50',
        'order.address' => 'required|max:100',
        'order.phone' => 'required|max:15',
        'order.email' => 'required|max:50',
        'order.total' => 'required|numeric',
        'dishes.*.dish_id' => 'required|exists:dishes,id',
        'dishes.*.quantity' => 'required|numeric',
        'dishes.*.restaurant_id' => 'required|exists:restaurants,id',
    ]);

    // 创建订单
    $newOrder = Order::create($validatedData['order']);

    // 准备多对多关联数据
    $dishAttachData = [];
    foreach ($validatedData['dishes'] as $dish) {
        $dishAttachData[$dish['dish_id']] = [
            'quantity' => $dish['quantity'],
            'subtotal' => $dish['price'] * $dish['quantity'],
            'restaurant_id' => $dish['restaurant_id'],
            'user_id' => $dish['user_id']
        ];
    }

    // 关联菜品到订单
    $newOrder->dishes()->attach($dishAttachData);

    return response()->json(['success' => true]);
}

内容的提问来源于stack exchange，提问作者Alessio