Question

如何使用vue创建实时搜索，API中的参数为3，即选择1，选择2和文本框1？
例如http://example.com/api/?param1=x&param2=xx&param3=xxx

enter image description here

Answer 1

首先，您需要在laravel中为您的搜索创建一个端点，并使用您的3个参数作为获取请求，如here所述。

其次，您需要编写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之外，我还使用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">

现在是主要的脚本部分

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

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

loadash去抖功能用于将API请求延迟500秒以防止频繁请求。

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

Vue.js使用多个参数

2 个答案: