如何在 Vue Template 中的 laravel 控制器中显示结果？答案

【问题标题】：How to display results in a laravel controller in Vue Template?如何在 Vue Template 中的 laravel 控制器中显示结果？
【发布时间】：2021-04-13 15:18:32
【问题描述】：

请在 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 ] resut

这是 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)
          })
        }

【问题讨论】：

您能否也发布一些 vue 组件/vue 模板，以便我们可以看到那边发生了什么？
请我更新一下
和模板，你有没有在你的模板中尝试过 {{ batchResource }}？
``` {{batch.patient_number}} {{batch.患者姓名}} | {{batch.patient_gender}} ```

标签： vue.js laravel-vue

【解决方案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>

【讨论】：