Vue.js實時搜索與多個參數

Question

如何使用vue創建實時搜索並且API中的參數爲3，即選擇1，選擇2和文本框1？
例如http://example.com/api/?param1=x&param2=xx&param3=xxx

Answer 1

首先，你需要創建一個laravel端點搜索與你的3個參數的描述here GET請求。

其次，您需要編寫您的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公司我也使用API​​請求和loadash Axios公司爲獲得額外的功能香草JS不提供本身。如果你正在使用Laravel混合，那麼你已經擁有了一切，這些進口這些使用CDN

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

主要腳本部分

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

我不包括服務器端部分所有你需要做的只是返回你的查詢對象而不轉換成JSON。

注意我用手錶來防止在用戶輸入至少一些字母之前調用findResult函數。

loadash debounce函數用於延遲API請求500秒以防止頻繁請求。

我假設你知道如何使用v-for指令輸出返回查詢對象。如果你不知道下面的評論。