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指令输出返回查询对象。如果你不知道下面的评论。