Vue3+Laravel9邮件发送问题：数组对象无法渲染邮件表格

问题情况 #

开发Vue3集成Laravel9的应用，通过前端提交数据发送邮件，使用Laravel Mailable类实现。邮件发送功能正常，大部分数据可正常显示，但对象数组数据无法填充到邮件表格中，尝试直接传递Vue Proxy和转为普通数组均无效。

相关代码 #

Vue组件发送邮件函数 #

sentMail(e) {
    e.preventDefault();
    var obj = this;
    
    // console.log(JSON.parse(JSON.stringify(obj.compras)))
    console.log(this.soma)
    alert("Concretizou a compra. Veja o seu email");

    axios.post('mail-send', {  
        nome: this.nome,  
        email: this.email,
        transportadora: this.transportadora,
        compras: JSON.parse(JSON.stringify(this.compras)),
        soma: this.soma,
    }).then(function (response) {  
        obj.output = response.data;  
    })  
    .catch(function (error) {  
        obj.output = error.response.data;  
    });   
    this.compras = [];
},

Laravel控制器发送邮件函数 #

public function mailSend(Request $request) {
    $email = $request->email;

    $data = [
        'nome' =>  $request->nome,
        'transportadora' => $request->transportadora, 
        'soma' => $request->soma,
        'compras' => $request->compras
    ];

    Mail::to($email)->send(new ComprasMail($data));

    return response()->json([$request->all()]);  
}

邮件Blade模板数组渲染部分 #

@foreach($data['compras'] as $compra)
<tr>
<td style="text-align: center; vertical-align: middle">{{$compra.nome}}</td>
<td style="text-align: center; vertical-align: middle">{{$compra.qtd}}</td>
<td style="text-align: center; vertical-align: middle">{{$compra.valor}}</td>
</td>
</tr>
@endforeach

Vue数组创建代码 #

addTable(){
    var single = this

    axios.get('/get_produtos/'+ single.choosed)
         .then((response)=>{
            single.compras.push({nome:response.data.nome,qtd:single.novaCompra.qtd,valor:(+(single.novaCompra.qtd*response.data.preco).toFixed(2))});
            single.novaCompra = {nome:"",qtd:"",valor:""};
         })
}

排查与修复步骤 #

1. 修复Blade模板语法错误
   Laravel Blade中访问对象属性需用->而非.，且原模板存在多余的</td>标签，修正后代码：

   @foreach($data['compras'] as $compra)
   <tr>
       <td style="text-align: center; vertical-align: middle">{{ $compra->nome }}</td>
       <td style="text-align: center; vertical-align: middle">{{ $compra->qtd }}</td>
       <td style="text-align: center; vertical-align: middle">{{ $compra->valor }}</td>
   </tr>
   @endforeach
   

2. 验证Mailable类数据传递
   确保ComprasMail类将接收的$data赋值为公共属性，Blade才能正常访问：

   class ComprasMail extends Mailable
   {
       public $data;
   
       public function __construct($data)
       {
           $this->data = $data;
       }
   
       public function build()
       {
           return $this->view('emails.compras'); // 对应你的邮件视图路径
       }
   }
   

3. 确认前端发送数据格式
   打开Vue函数中注释的console.log(JSON.parse(JSON.stringify(obj.compras)))，检查控制台输出的数组是否包含nome、qtd、valor字段，且数据类型正确。

4. 控制器添加数据验证
   在控制器中添加请求验证，确保接收的数组格式符合要求：

   public function mailSend(Request $request) {
       $request->validate([
           'compras' => 'array|required',
           'compras.*.nome' => 'string|required',
           'compras.*.qtd' => 'numeric|required',
           'compras.*.valor' => 'numeric|required',
       ]);
   
       $email = $request->email;
   
       $data = [
           'nome' =>  $request->nome,
           'transportadora' => $request->transportadora, 
           'soma' => $request->soma,
           'compras' => $request->compras
       ];
   
       Mail::to($email)->send(new ComprasMail($data));
   
       return response()->json([$request->all()]);  
   }
   

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