vuejs2에서 "사용자 입력 중지 후 양식 제출"을 수행하는 방법

vuejs2에서 "사용자 입력 중지 후 양식 제출"을 수행하는 방법

검색 모듈이 있습니다. 사용자가 입력을 멈추면 이름을 검색해야 합니다.

제가 생각하는 해결책은,timeout사용자일 때keyup.참조

<input type="text" @keyup="textSearch($event)">

textSearch(e){
    var timer;
    clearTimeout(timer);

    timer = setTimeout(() => {
        alert('searching...');
    }, 2500);
}

코드는 모두 동작하고 있었습니다만, 문제는 1초만에 3자를 입력했을 때 3개의 경보가 뜨는 것입니까?2.5초 동안 대기하기 때문에 팝아웃이 하나 있을 것 같아요.

코드에 무슨 문제라도 있나요?도움이 필요함

문제가 있는 것으로 알고 있는 경우는, 실행할 때마다 타임 아웃을 클리어 합니다.textsearch()마지막으로 작성한 것이 아니라 방금 선언한 것입니다.var timer대신 timer 변수를 데이터 속성에 저장하여 clear Timeout에서 올바른 타임아웃을 클리어할 것을 권장합니다.

다음과 같은 경우:

data: {
    timer: undefined
},
methods: {
    textSearch(e){
      clearTimeout(this.timer)

      this.timer = setTimeout(() => {
          alert('searching...')
      }, 2500)
    }
}

내가 수정한 코드를 조작하는 중:

https://jsfiddle.net/MapletoneMartin/yjxfsehz/2/

행운을 빕니다.

해결책은 다음과 같습니다.

setTimeout괜찮음--또는,debounce 뷔데바운스

<input v-debounce:400ms="myFn" type="text" />

<script>
export default {
  methods: {
    myFn(val) {
      console.log(val) // => The value of the input
    }
  }
}
</script>

이 문제를 해결하기 위해 제가 하는 일은timerVue 데이터의 변수:textSearch내부 타이머 기능이라고 불리는 메서드가 재할당됩니다.

data () {
    return {
        timer: null
    }
}


textSearch(e){
    clearTimeout(this.timer);

    this.timer = setTimeout(() => {
        alert('searching...');
    }, 2500);
}

이것으로 당신의 문제가 해결될 것 같습니다.

이를 위한 또 다른 해결책은,watch사용하는 대신event-keyup를 작성해야 합니다.model첫번째.

<input type="text" v-model="searchTxt">

data(){
    return{
        searchTxt: ''
    }
},

watch: {
    searchTxt: function(val) {
        if (!this.awaitingSearch) {
          setTimeout(() => {
            alert('searching');
            alert(this.searchTxt); //alert value

            this.awaitingSearch = false;
          }, 2500); // 2.5 sec delay
        }
        this.awaitingSearch = true;
    }
}

상세 정보

언급URL : https://stackoverflow.com/questions/59711470/how-to-do-submit-form-after-user-stop-typing-in-vuejs2