Vue中 Watch 监听input在输入完成后等待一秒后进行调用接口

1,781 阅读1分钟
 <el-input v-model="inputData" placeholder="Filter Content"></el-input>
 这里我引用了element ui 的input框 
 并且在data里面申明inputData
 data () {
     return :{
         inputData: '',
         timer: 0 //定义一个时间
     }
 },
 methods:{
     GetValue(){
         .......
     }
 }
 watch: {
     inputData (value){
     console.log(value) // 打印出输入input的值
     if (this.timer === 0 ) {
         this.timer = setTimeout (() => {
         this.GetValue()
         }, 1000)
     } else {
         clearTimeout(this.timer)
         this.timer = setTimeout (() => {
         this.GetValue()
         }, 1000)
     }
     
 }

至此在input中收入完成并等待1秒后会进行接口调用