如何在 Vue 模板中的 Laravel 控制器中显示结果？

如何解决如何在 Vue 模板中的 Laravel 控制器中显示结果？

请我在 Laravel 控制器的数组内有一个返回值。我想在 Vue 模板中显示，但有问题。我需要帮助。

    public function search(Request $request)
    {  
      $batchResults = \DB::table('patient')
                            ->select('*')
                            ->join('registrations','patient.patient_id','registrations.patient_id')
                            ->where('patient.name','like','%' . $request -> name . '%')
                            ->whereBetween('registrations.created_at',[date($request->from),date($request->to)])        
                            ->get();

                        $search = $request -> name;


                        return [ $batchResults,$batchResults ];

我想在 vue 模板中显示 [ $batchResults,$batchResults ] 结果

这是console.log结果

(2) [Array(1),"James Asay",__ob__: Observer]
0: [{…},__ob__: Observer]
1: "James Asaye"
length: 2
__ob__: Observer {value: Array(2),dep: Dep,vmCount: 0}
__proto__: Array

Vue 组件

searchBatch(){
          axios.post('/search-results',this.form).then((res)=>{
            this.batchResource = res.data
            this.display = true

            console.log(res.data)
          })
        }

解决方法

好吧，一种调试这类问题的有用策略，在您的模板中添加：

<pre>{{$data}}</pre>

这样您就可以在模板中看到所有可用的数据。

至于为什么它不起作用。您从您的服务器接收 batchResource，它是一个数组：[ $batchResult,$batchResult ],

要么更改您的 searchBatch 函数以适应这种情况，如下所示：

searchBatch(){
   axios.post('/search-results',this.form).then((res)=>{
  
   // res.data = [ $batchResult,$batchResult ]
   // take the first list of results:
   this.batchResource = res.data[0]
   this.display = true

   console.log(res.data)
   })
}

或者不改变搜索功能并在您的模板中处理它：

<tr v-for="batch in batchResource[0]" :key="batch.id">
    <th scope="row">{{batch.patient_number}}</th>
    <td>{{batch.patient_name}} | {{batch.patient_gender}}</td>
</tr>