Vue.js 1つ以上のパラメータを使用したライブ検索

Question

vueでライブ検索を作成するにはどうすればいいですか？パラメータはAPIで3です（選択1、選択2、テキストボックス1）。
例えば http://example.com/api/?param1=x&param2=xx&param3=xxx

Answer 1

あなたはhereが説明するように、要求を取得するなど、あなたの3つのパラメータを使って検索用laravelでエンドポイントを作成する必要がありまず。

第2に、Vueコンポーネントを記述し、そのエンドポイントを非同期要求で呼び出す必要があります。最も簡単な方法はおそらくaxiosを使用することです。

送信ボタンにクリックリスナーを登録して、ページを更新しないようにデフォルトイベントを防止するようにしてください。フォームのうち、すべてのパラメータを取得し、そのようにリクエストを送信します。

ここ

axios.get('/search?ID=12345&name=jondoe') 
    .then(function (response) { 
    // update your view here with the response. Example: 
    this.resultTable = response.results 
    }) 
    .catch(function (error) { 
    console.log(error); 
    }); 

Answer 2

は完全なソリューションである、Vueの横に私はまた、提供していない追加機能バニラJSを取得するためのAPIリクエストとloadashためaxiosを使用していますネイティブに。あなたはLaravelミックスを使用しているなら、あなたはすでに、他のすべてのこれらのこれらの使用CDN

私は含めておりませんさて、メインスクリプト部分

<script> 
    var app = new Vue({ 
    el: '#app', 
    data: { 
    select1: '', 
    select2: '', 
    textbox: '', 
    }, 
    watch: { 
    textbox: function() { 
     if (this.textbox.length >= 3) { 
     this.findResults(); 
     } 
    } 
    }, 
    methods: { 
    findResults: _.debounce(function() { 
     self = this; 
     axios.post('your laravel post url',{ 
       select1 : self.select1, 
       select2 : self.select2, 
       textbox : self.textbox, 
      }) 
      .then(function (response) { 
       console.log(response.data); 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }) 
    }, 500) 
    } 
}) 
</script> 

<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script> 
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script> 
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script> 

ビューページで

<select v-model="select1" > 
     <option >1</option> 
     <option >2</option> 
</select> 
<select v-model="select2" > 
     <option >1</option> 
     <option >2</option> 
</select> 
<input type="text" v-model="textbox"> 

をインポートしていサーバー側で行う必要があるのは、JSONに変換せずにクエリオブジェクトを返すだけです。

注意watchを使用して、ユーザが少なくともいくつかの文字を入力する前にfindResult関数を呼び出さないようにしました。

loadashデバウンス機能は、頻繁な要求を防ぐために、APIリクエストを500秒間遅延させるために使用されます。

v-forディレクティブを使用してreturn queryオブジェクトを出力する方法を知っています。下のコメントが分からない場合