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

Question

拜托，我在 Laravel 控制器的数组中有一个 return 值。我想在 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)
          })
        }

Answer 1

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

<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>

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

How to display results in a laravel controller in Vue Template?

vue.js

laravel-vue