Laravel 具有多个参数的Vue.js live搜索

如何使用

vue

创建实时搜索，并且API中的参数为3，即选择1、选择2和文本框1？
例如

---

首先，您需要在laravel中创建一个端点，用于搜索，使用3个参数作为get请求，如下所述

其次，您需要编写Vue组件，并使用异步请求调用该端点。最简单的方法可能是使用

在“发送”按钮上注册单击侦听器，并确保阻止默认事件，使其不会刷新页面。从表单中获取所有参数并发送如下请求：

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

---

这是完整的解决方案，除了Vue之外，我还使用axios处理API请求，并使用loadash获得vanilla js本机不提供的额外功能。如果您使用的是Laravel Mix，那么您已经使用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">

1.
2.
1.
2.

现在是主脚本部分

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

var app=新的Vue({
el:“#应用程序”，
数据：{
选择1:“”，
选择2:“”，
文本框：“”，
},
观察：{
文本框：函数（）{
如果（this.textbox.length>=3）{
this.findResults（）；
}
}
},
方法：{
findResults:u.debounce（函数（）{
self=这个；
axios.post（'您的laravel post url'{
select1:self.select1，
select2:self.select2，
textbox:self.textbox，
})
.然后（功能（响应）{
console.log（response.data）；
})
.catch（函数（错误）{
console.log（错误）；
})
}, 500)
}
})

我不包括服务器端部分，您只需返回查询对象而不转换为JSON

注意：我使用watch防止在用户至少键入一些字母之前调用findResult函数

loadash debounce函数用于将API请求延迟500秒，以防止频繁请求

---

我假设您知道如何使用v-for指令输出返回查询对象。如果你不知道下面的评论

这个问题太宽泛，无法回答。如果你被卡住了，试着提出一个更具体的问题。@DanielBeck我已经编辑过了。现在对你来说更具体了吗？