vue를 사용하여 lodash에 메서드를 전달하면 '예상된 기능'이 제공됩니다.

vue를 사용하여 lodash에 메서드를 전달하면 '예상된 기능'이 제공됩니다.

Lodash Throttle 방식으로 Vue 기능을 전달하려고 합니다.이런 거 하면 되는 거 아니에요?

이것을 실행하려고 하면, 다음의 에러가 발생합니다.

워처 "쿼리"에 대한 콜백 오류: "TypeError: 예상된 함수"

감시자

watch: {
    query() {
        throttle(this.autocomplete(), 400);
    }
}

방법들

methods: {
    autocomplete() {}
}

함수 참조를 전달하고 있는데도 오류 메시지가 나타납니다.익명 기능으로 감싸면 부팅되지 않습니다.

throttle(() => { this.autocomplete(); }, 400);

방금 확인했는데autocomplete위의 예에서는 함수가 아닌 에러에 관계없이 함수는 실제로 기동하는 것처럼 보입니다.

여기서 무슨 일이 일어나고 있는 거죠?

편집:

Jsfiddle : http://jsfiddle.net/yMv7y/2780/

반환값을 전달하고 있습니다.this.autocomplete()(아마도undefined기능 참조가 아닙니다.후자의 경우는, 괄호를 생략할 필요가 있습니다.

watch: {
    query() {
        throttle(this.autocomplete, 400);
    }
}

작업 접근법:

var demo = new Vue({
  el: '#demo',
  data: {
    query: ''
  },
  watch: {
    query: function() {
      this.autocomplete()
    }
  },
  methods: {
    autocomplete: _.throttle(function() {
      console.log('test');
    }, 50)
  }
})

<script src="http://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

<div id="demo" v-cloak>
    <input type="text" v-model="query">
</div>

@Bill Criswell이 코멘트했듯이

이는 쿼리가 변경될 때마다 조절된 함수를 만듭니다.아래 답변과 같은 슬롯링 함수를 계속 호출해야 합니다.

변수에서 호출되지 않은 콜백을 사용하여 슬롯링 함수를 정의한 후 함수로서 호출해야 합니다.

var throttled = throttle(this.autocomplete, 400)
watch: {
    query() {
        throttled();
    }
}

그걸 알아내는데 꽤 시간이 걸렸어요

언급URL : https://stackoverflow.com/questions/44407007/passing-method-to-lodash-with-vue-gives-expected-a-function