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

Posted 2023-02-22

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

【英文标题】：Axios.post array from Vue js to Laravel, only get [object Object] in my request

【发布时间】：2021-05-14 08:50:48

【问题描述】：

我是 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" : 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"  ></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();
        
    

【问题讨论】：

要准确查看 Vue 应用程序向服务器发送的内容，您可以使用浏览器开发控制台中的网络工具。以下是如何为 Chrome 执行此操作的示例：developers.google.com/web/tools/chrome-devtools/network

非常感谢，我会调查一下再回来。

阵列看起来还可以，但我认为现在问题出在服务器端...

你可能有幸使用$cart = $request->input('cartobj'); 获取从checkout 函数发送的cartobj: this.cart 信息

我也会尝试这个解决方案。谢谢

【参考方案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。

【讨论】：

我想我明白你的意思了，还有其他方法吗？我可以跳过输入并直接发送数组吗？

隐藏的输入可以在这里被删除是的——它们通常对于以原生形式包含数据最有用。 axios会在checkout函数中发送给它的数据

【参考方案2】：

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

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

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

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

【讨论】：

感谢您的回复，我试过了，但还是不行...