时间戳

首页 > 解决方案 > 搜索过滤器在单击搜索按钮之前不会获取数据

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

问题描述

这是一个 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>

标签： phpmysqllaravelvue.js

解决方案

问题是当您第一次加载页面时，您的 url 中没有获取查询参数，所以在该行

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

您第一次执行的查询是：

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

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

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

PD：小心 SQL 注入阅读此内容

编辑：还在您的已安装方法中的组件调用中， makesearch方法。

data(){
    ...
}

...

mounted(){
   this.makesearch()
}

推荐阅读