Lodash ReferenceError: _ не определен во Vue, хотя он работает везде

В моем файле компонента shoppingCart.vue я вызываю простой метод:

saveCart : _.debounce(() => {
            console.log('hi');
        }, 2000),

Но я получаю сообщение об ошибке: Uncaught ReferenceError: _ не определен.

Теперь самое интересное. Если я изменю функцию, например, на:

saveCart(){
   console.log(_.random(0, 5));
}

Все работает идеально, и я получаю, например: 4. Чтобы было еще интереснее, у меня есть некоторые другие компоненты, которые используют _.debounce, например, для поиска пользователей:

findUsers: _.debounce(
     function (term) 
     {
        let vm = this;
        axios.get('/search', { params: { user: term }})
            .then(response => {
                vm.updateResult(response.data);
            });
    }
  ,500),

И работает отлично.

Итак, вот вам справочная информация. Думаю, у меня есть догадка, в чем проблема, но я не уверен: я использую Laravel и импортирую Lodash через bootstrap.js с

window._ = require('lodash');

Мой компонент shoppingCart.vue вызывается Buying.vue. Buying.vue вызывается

export default new VueRouter({
   mode: 'history',
   routes: [
      {
        path: '/:user/:title',
        component: require('./views/buying/Buying'),
      },
   ],
});

Может проблема где-то из-за vue router? Но я попытался сделать jsfiddle http://jsfiddle.net/gnu5gq3k/, но мой пример работает в этом случай ... В моем реальном проекте test2 создает проблему ...

В чем может быть проблема? Какая информация вам нужна, чтобы лучше понять мою проблему?

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

debounce(func, wait, immediate) {

        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    },
    saveCart: this.debounce(() => {
                // All the taxing stuff you do
                console.log('blubb');
            }, 250),

И я не могу вызвать свою собственную функцию!

Uncaught TypeError: this.debounce is not a function
at Object

Что я делаю неправильно?


vue.js vue-router vuejs2 lodash debounce
person Philipp Mochine    schedule 03.03.2018    source источник

Ответы (2)


arrow_upward
13
arrow_downward

Ошибка: неперехваченная ошибка ReferenceError: _ не определено.

In shoppingCart.vue do import _ from 'lodash';:

<script>
  import _ from 'lodash';

  export default {
     // ...
  }
</script>

Uncaught TypeError: this.debounce не является функцией объекта

Вы не можете использовать this при построении объекта (объект еще не создан). Вы можете использовать его в функциях, потому что этот код не выполняется сразу.

window.a = "I'm window's a";
var myObj = {
  a: 1,
  b: this.a
};
console.log(myObj); // {a: 1, b: "I'm window's a"}

person acdcjunior    schedule 03.03.2018
comment
Для меня это очень странно, зачем мне его импортировать, если он глобальный? И он отлично работает в другом компоненте. С импортом просто работает ... супер странно - person Philipp Mochine; 03.03.2018
comment
Это потому, что этот код предварительно обрабатывается многими способами, прежде чем он фактически будет развернут для запуска в браузере. Во время сборки контекст очень ограничен (это хорошо), и window еще нет. Некоторый код запускается только во время выполнения (в браузере), а не во время сборки, поэтому они не выходят из строя. - person acdcjunior; 03.03.2018

arrow_upward
-1
arrow_downward

Мое решение - обходной путь:

mounted(){
  let that = this;
  let savingCart = _.debounce(() => {
     that.saveCart();
  }, 1000);

  window.events.$on('savingCart', savingCart);
}

Это отлично работает

person Philipp Mochine    schedule 03.03.2018