Lodash ReferenceError:_在Vue中未定义,即使它在其他任何地方都有效

时间:2018-03-03 19:48:45

标签: vue.js vuejs2 lodash vue-router debounce

在我的组件shoppingCart.vue文件中,我调用了一个简单的方法:

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

但我收到错误:未捕获的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,我通过bootstrap.js导入Lodash

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路由器,问题可能就在某处?但我尝试制作一个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

我做错了什么?

2 个答案:

答案 0 :(得分:8)

  

错误:未捕获的ReferenceError:_未定义。

shoppingCart.vue执行import _ from 'lodash';

<script>
  import _ from 'lodash';

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

未捕获的TypeError:this.debounce不是函数   在对象

在构建对象时,您无法使用this(该对象尚未创建)。您可以在函数中使用它,因为该代码不会立即执行。

&#13;
&#13;
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"}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我的解决方案是一种解决方法:

chown -R apache:apache /home/user/public_html/laravel/

这很好用