CODEWITHSUNDEEP
phpmysqllaravelvue.js
Shishir
Shishir

Reputation: 187

search filter is not fetching data until clicking on search button

It's a laravel vuejs project. Here is the photo of my product page : enter image description here

Products were supposed to display at that page, but it's completely null until I am clicking on the search button . After clicking on the search button, the page loads the products and the search option working as well.

enter image description here

My codes are :

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();
     }
 }

productpage ->

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

Upvotes: 1

Views: 340

Answers (1)

fluid undefined
fluid undefined

Reputation: 418

The problem is when you load the page for the first time, there is not get query parameter in your url, so in the line

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

The query that you are doing the first time is:

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

You could use the syntax below for setting up a default parameter

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

PD: Be careful with SQL Injection Read this

Edit: Also in your Component call in your mounted method the makesearch method.

data(){
    ...
}

...

mounted(){
   this.makesearch()
}

Upvotes: 1

Related Questions