搜索过滤器在单击搜索按钮之前不会获取数据

Question

这是一个 laravel vuejs 项目。这是我的产品页面的照片：

产品本应显示在该页面上，但在我单击搜索按钮之前它完全为空。点击搜索按钮后，页面加载产品，搜索选项也正常工作。

我的代码是：

web.php ->

Route::get('/', 'App\Http\Controllers\Mastercontroller@index');

Route::get('/search', 'App\Http\Controllers\Mastercontroller@search');

Route::any('{slug}', 'App\Http\Controllers\Mastercontroller@index');

Mastercontroller.php ->

<?php

namespace App\Http\Controllers;

use App\Models\myproductcase;
use Illuminate\Http\Request;

class Mastercontroller extends Controller
{
     public function index(){
        return view('welcome');
     }

     public function search(Request $r){
    
        $search = $r->get('q');
        return myproductcase::where('name','LIKE','%'.$search.'%')->get();
     }
 }

产品页面->

   <template>
   <div>

   <div class="search"><input v-model="search" type=text></input><button 
   @click.prevent="makesearch()">Search</button></div>
     
     <div class="product-list">
        <div v-if="showsearch==true"> 
             <div v-for="getresult in getdata" v-bind:key="getresult.id">
                    <div class="product">
                    <h1>{{getresult.name}}</h1>
                    <h3>{{getresult.price}}</h3>
                    <p>{{getresult.description}}</p>
             </div>    
        </div> 
        <div v-if="showsearch==false">
            no data found
            </div>    
         </div>               
      </div>
    </div>  
</template>
<script>
export default{
    data(){
        return{
        search : '',
        showsearch : false,
        getdata : []
     }
   },
   methods : {
       async makesearch(){
            fetch('/search?q='+this.search).then(hi=>hi.json()).then(hi=>{
                    console.log();
                    this.getdata = hi;
                    this.search = '';
                    this.showsearch = true;
                }).catch(err=>{
                    console.log(err);
                });
            }   
        
       },
   
   }
</script>

Answer 1

问题是第一次加载页面时，你的url中没有get查询参数，所以在行

$search = $r->get('q'); // Is equal to NULL

你第一次做的查询是：

return myproductcase::where('name','LIKE','%NULL%')->get();

您可以使用下面的语法来设置默认参数

$search = $r->get('q', 'default value' );

PD：小心 SQL 注入 Read this

编辑： 同样在 mounted 方法中的 Component 调用中使用 ma​​kesearch 方法。

data(){
    ...
}

...

mounted(){
   this.makesearch()
}