web-dev-qa-db-ja.com

Lodash ReferenceError：_はVueで定義されていませんが、他の場所では機能します

コンポーネントshoppingCart.vueファイルで、単純なメソッドを呼び出しています。

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

しかし、エラーが発生します：Uncaught ReferenceError：_ is notdefined。

今、楽しい部分を取得します。たとえば、関数を次のように変更した場合：

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を使用しており、bootstrap.jsを介してLodashをインポートしています。

window._ = require('lodash');

私のコンポーネントshoppingCart.vueはBuying.vueによって呼び出されています。 Buy.vueはによって呼び出されます

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

たぶん問題はvueルーター？しかし私は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.jsvuejs2lodashvue-routerdebounce
4
Philipp Mochine

エラー：キャッチされていないReferenceError：_が定義されていません。

shoppingCart.vue 行う import _ from 'lodash';：

<script>
  import _ from 'lodash';

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

Uncaught TypeError：this.debounceはObjectの関数ではありません

オブジェクトの作成中に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"}
5
acdcjunior

私の解決策は回避策です：

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

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

これは問題なく動作します

0
Philipp Mochine