Vue JS前端的axios帖子未将数据存储在laravel后端中

Question

我有一些需要存储在数据库中的数据来自localStorage。一个是用户可以在其中更改项目数量的输入字段，另一个是用户必须选择要发送到的地址的单选框。问题在于它既不会将address_id存储在我的数据库中，也不会更新购物车中输入的qty字段。有人可以看一下并解释为什么这行不通吗？非常感谢！

注意：数据对象是反应性的，我检入了vue开发工具，它更改了数据的正确性，因此在那里没有问题。

Vue添加到购物车按钮组件：

<template>
    <form @submit.prevent="addToCart">
        <button>Add to cart</button>
    </form>
</template>

<script>
export default {
    props: ['productId', 'categoryId'],
    data() {
        return {
            product: {},
            cart: []
        }
    },
    methods: {
       fetchData() {
            axios.get(`http://localhost:8000/api/product/${this.productId}/category/${this.categoryId}`)
                .then(res => {
                    const { product } = res.data;

                    this.product.id = product.id
                    this.product.title = product.title;
                    this.product.fitSize = product.fit_size;
                    this.product.jeansSize = product.jeans_size;
                    this.product.price = product.price;
                    this.product.img = product.images[0].images;
                    this.product.quantity = 1;
                })
                .catch(err => console.log(err))
        },
        addToCart() {

            if(localStorage.getItem('cart')) {

                // Little note to myself: 
                // Grab data from local storage and turn it into a js array of objects
                // Push new product to that array every time the addToCart method gets fired
                // get that array with the additional items and store back in local storage as a JSON string
                let cart = JSON.parse(localStorage.getItem('cart'));
                cart.push(this.product)
                return localStorage.setItem('cart', JSON.stringify(cart))
            } else {
                this.cart.push(this.product)
                localStorage.setItem('cart', JSON.stringify(this.cart))
            }
        }
    },
    mounted() {
        this.fetchData()
    }
}
</script>

Vue结帐组件：

<template>
    <div> 
            <div v-for="product in products" v-bind:key="product.id">
                <p>Img: {{product.img}}</p>    
                <p>Title: {{product.title}}</p>    
                <p>Price: {{product.price}}</p>  
                <input v-model="product.quantity" type="number" name="qty" id="qty">
                <br>
            </div> 

            <form method="POST" @submit.prevent="placeOrder">

                <div v-for="address in user.addresses" v-bind:key="address.id">
                    <input type="radio" v-model="addressId" v-bind:value="address.id" name="address_id" id="address_id">{{address.street}}
                </div>

                <button>Place order</button>
            </form>
    </div>
</template>

<script>
export default {
    props: ['user'],
    data() {
        return {
            products: null,
            addressId: null,
            orders: [],
        }
    },
    methods: {
        fetchDataFromLocalStorage() {
            this.products = JSON.parse(localStorage.getItem('cart'))
        },
        createOrders() {
            this.products.forEach(product => {
                this.orders.push({
                    qty: product.quantity, 
                    user_id: this.user.id, 
                    product_id: product.id,
                    address_id: this.addressId
                })
            })
        },
        placeOrder() {
            const sendOrders = { orders: this.orders }
            axios.post(`http://localhost:8000/api/user/${this.user.id}/checkout`, sendOrders)
                .then(res => console.log(res.data))
                .catch(err => console.log(err))
        },
    },
    mounted() {
        this.fetchDataFromLocalStorage();
        this.createOrders();
    }
}
</script>

Laravel存储方法：

public function store(Request $request, $id)
    {

        foreach ($request->orders as $order) {
            Order::create([
                'qty' => $order['qty'],
                'product_id' => $order['product_id'],
                'user_id' => $order['user_id'],
                'address_id' => $order['address_id']
            ]);
        }

        return response()->json('Order created');
    }

订单模型：

class Order extends Model
{
    protected $guarded = [];

    public function product()
    {
        return $this->hasOne(Product::class);
    }

    public function user()
    {
        return $this->belongsTo(Order::class);
    }

    public function addresses()
    {
        return $this->hasOne(Addresses::class);
    }
}

Laravel API路线：

Route::post('/user/{id}/checkout', 'CheckoutController@store');

发帖时请修补匠：

      App\Order {#3072
         id: "127", 
         qty: "1",   // Default value just won't change whenever I try to update it!
         delivered: "0",
         product_id: "3", // This works
         created_at: "2019-12-23 10:08:09",
         updated_at: "2019-12-23 10:08:09",
         user_id: "1", // This works
         address_id: null, // This doesn't
       },
     ],