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

Posted 2023-02-24

【中文标题】搜索过滤器在单击搜索按钮之前不会获取数据

【英文标题】：search filter is not fetching data until clicking on search button

【发布时间】：2021-03-21 04:11:53

【问题描述】：

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

【问题讨论】：

问题是，在我点击搜索按钮之前没有加载产品，我希望产品应该自动显示，搜索选项应该像过滤器一样工作

(1) 您想在页面加载后立即执行搜索吗？ (2) 在文本框中输入时，想要在不点击搜索按钮的情况下执行搜索和显示数据？

如果您想尝试@NileshPatel 指定的 (2)，请尝试使用 watch

@nilesh patel @bhucho no 兄弟，我试图在页面加载后立即显示所有产品。我得到了解决方案 - 感谢您的时间和想法

【参考方案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()

【讨论】：

感谢您的回答，不过我得到了另一个解决方案，第一次使用 created() 加载所有数据 - 这是一个不好的做法吗？

我已经编辑了我的答案，我总是使用挂载的方法。研究 Vue 中的组件生命周期。

@Shishir 如果您的数据较少，则可以在 mount() 中加载，但如果您有大量数据，则不是一个好方法。在这种情况下，让用户搜索特定数据。

你的意思是，我不应该将所有数据都放在一个页面中？

增加分页，解决海量数据收费问题