Используя Vue.js, как очистить метод, который обсуждается с lodash? - PullRequest
Новая
       10

Используя Vue.js, как очистить метод, который обсуждается с lodash?

0 голосов
/ 25 октября 2018

В документах Vue.js предлагается использовать функцию отладки lodash для отсеивания дорогих методов, которые я успешно реализовал.Но иногда я не хочу действовать немедленно, и документы lodash говорят:

Функция debounce поставляется с методом отмены для отмены отложенных вызовов func и методом сброса для немедленного их вызова .

Но это все.Нет информации, как вызвать метод flush.Я нашел это сообщение в блоге, но я не уверен, как реализовать это в компоненте Vue.js.

Это то, что я сейчас имею в своем компоненте Vue.js ( codepen ): 

<template>
  <input type='text' @keyup="change" @keyup.enter="changeNow">
</template>

<script>
export default {
  name: "MyComponent",
  methods: {
    change: _.debounce(function() {
      console.log("changing...");
    }, 250),
    changeNow: function() {
      this.change();
      this.change.flush();
    }
  }
};
</script>

change правильно отлажен и запускается только один раз после ввода текста, как и ожидалось.Тем не менее, changeNow выдает следующую ошибку:

Uncaught TypeError: this.change.flush не является функцией

Любой совет о том, как реализовать это, будет оченьоценили!

Ответы [ 2 ]

0 голосов
/ 25 октября 2018

Вы получаете свою проблему из-за странности в том, как vue обрабатывает раздел методов.

По умолчанию Vue ожидает только функции из списка методов, , а затем он проходит по этим методам ивызывает .bind для них, чтобы убедиться, что this всегда работает.

Поскольку это циклическое выполнение, вы можете получить доступ только к самой функции, и никаких других членов этих функций нет.

Если вы добавите метод изменения в свой раздел данных, вы сможете получить доступ к его свойствам и вызвать метод сброса: 

var app = new Vue({
    el: "#app",    
      data: {
            change: _.debounce(function() {
        console.log("changing...");
      }.bind(this), 1000),
    },
    methods: {
      changeNow: function() {
        this.change.flush();
      }
    }
  });

https://codepen.io/anon/pen/gBZrrj?editors=1111

0 голосов
/ 25 октября 2018

Это похоже на работу, если вы переместите определения методов в созданный хук, как в примере в документах .. 

var app = new Vue({
    el: "#app",
    created() {
      this.change = _.debounce(function() {
        console.log("changing...");
      }, 1000);
      this.changeNow = function() {
        console.log("now...")
        this.change();
        this.change.flush();
      };
    }
  });

Codepen

...