Question

所以在我的网站上，我有一个输入框

<SearchBox v-model="searchTerm"/>

我通过Axios观看并调用网址

watch: {
    searchTerm: function() {
      axios
      .get("https://robotic.buzz/skynet/search/" + searchTerm)
      .then(response => {
        // JSON responses are automatically parsed.
        this.results = response.data;
      })
      .catch(e => {
        this.errors.push(e);
      });
    }
  }

是否可以延迟通话并取消先前的通话？因此，如果有人输入内容，当他们暂停1秒钟时，它将呼叫服务器，并且不会为输入的每个字母都调用它。

一个简单的1秒延迟仍然会使电话排队。

Answer 1

您可以如下使用lazy修饰符：

 <input type="text"  v-model.lazy="searchTerm" />

因此，当您离开文本字段时，您可以观看数据并致电axios

new Vue({

  el: '#app',
  data(){
  return{
  searchTerm:''
  }
  }
  ,
  watch: {
    searchTerm: function(val) {
    console.log(".")
      axios
      .get("https://robotic.buzz/skynet/search/" + val)
      .then(response => {
        // JSON responses are automatically parsed.
        console.log(response.data)
      })
      .catch(e => {
        this.errors.push(e);
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<!-- Conversations -->

<div id="app">

<input type="text"  v-model.lazy="searchTerm" />

</div>

VueJs和Axios：输入延迟后触发+取消上一个

1 个答案: