从Vue js到Laravel的axios.post数组，在我的请求中只得到[object Object]

Question

我是 Vue js 的新手，我试图到处寻找我的问题的答案，但徒劳无功。 我只是尝试从 Vue 组件向 Laravel 发送一个数组（购物车），但是当我尝试使用 foreach 循环获取数组中的项目时，我只得到 [object Object]。我做错了什么？ 我应该能够获得标题名称、数量和价格等，这一切都在我的网站中的 Vue 组件中工作，但是当我尝试发送到 Laravel 时，无法阅读它。

这是我的一些代码，请给我建议。

<form action="../api/checkout" method="post" @submit="checkout">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th scope="col">Artiklar</th>
                <th scope="col">Antal</th>
                <th scope="col">Pris</th>
                <th scope="col">Summa</th>
                <th scope="col">Radera</th>
            </tr>
        </thead>
        <tbody>
            <input type="hidden" name="cartobj" v-bind="cartitem">
            <tr v-for="(crt, index) in cart" :key="index">
                
            <td>{{ crt.title }}<br><img :src="/image/+crt.image" :alt="crt.image" style="height: 80px;"></td>
            <td>{{ crt.qty }} st <br><div class="row">
                <button class="btn btn-link col-md-6" @click="decrease(index)">-</button> 
                <button class="btn btn-link col-md-6" @click="increase(index)">+</button>
                </div></td>
            <td>{{ crt.subprice }} kr</td>
            <td>{{ (crt.subprice*crt.qty).toFixed(2) }} kr</td>
            <td><button @click="removecart(index)" class="btn btn-link"><img src="/pic/trash.png" alt="" width="20"></button></td>
        </tr>
    </tbody>
</table> 

<p class="border rounded text-right p-2"><b>Total: {{ subsum }} kr</b></p>

<button id="checkout" class="btn btn-success col">Gå till kassan</button>
 </form>


export default {
    props: ['product'],
    data() {
        return {
            cartitem: {
                title: this.product.article,
                qty: 1,
                subprice: (this.product.price/100).toFixed(2),
                image: this.product.image
            },
            cart: []
        }
    },checkout() {
            let c = {cartobj: this.cart}; 
            axios.post('../api/checkout', JSON.stringify(c));
        }

从我的控制器中，我尝试了很多不同的东西，但无法让它工作，即使是嵌套的 foreach 循环......

public function checkout(Request $request) 
    {
        $cart = request();
        foreach($cart as $d=>$c) {
            echo $d;
        }
        die();
        
    }

Answer 1

HTML 表单包含带有对象值的输入：

<input type="hidden" name="cartobj" v-bind="cartitem">

提交带有此类输入的本机表单将导致在请求中发送[object Object]。

而且，虽然配置为在提交时调用 checkout 函数，但表单也配置为在不使用 JavaScript 的情况下 POST 到 ../api/checkout：

<form action="../api/checkout" method="post" @submit="checkout">

这里可能发生的事情：

• 用户提交表单
  • checkout() 被调用
  • 同时提交本机表单。原生形式优先

您可以使用@submit.prevent="checkout" 阻止本机表单提交，如下所示：

<form @submit.prevent="checkout">

将.prevent 添加到 Vue 事件处理程序会阻止本机处理程序触发。在这种情况下，.prevent 在不使用 checkout 函数的情况下阻止提交 HTML 表单。

有关 Vue 的 .prevent 的更多信息，请参阅 Vue Event Modifier docs。

有关阻止事件本地处理的更多信息，请参阅Event.preventDefault() on MSDN。

Answer 2

将您的控制器代码更改为此，看看是否有帮助：

    public function checkout(Request $request) 
    {
        $cart = $request->all();
        foreach($cart as $d=>$c) {
           echo $d;
        }
        die();
    
    }

您还可以访问特定的输入值，如下所示：

    $name = $request->input('name');