【问题标题】:Lodash ReferenceError: _ is not defined in Vue even though it works everywhere elseLodash ReferenceError: _ 在 Vue 中没有定义,即使它在其他任何地方都可以使用
【发布时间】:2018-08-11 19:31:30
【问题描述】:

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

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

但我得到错误:未捕获的引用错误:_ 未定义。

现在得到有趣的部分。例如,如果我将功能更改为:

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');

Buying.vue 正在调用我的组件 shoppingCart.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

我做错了什么?

【问题讨论】:

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


    【解决方案1】:

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

    mounted(){
      let that = this;
      let savingCart = _.debounce(() => {
         that.saveCart();
      }, 1000);
    
      window.events.$on('savingCart', savingCart);
    }
    

    这很好用

    【讨论】:

      【解决方案2】:

      错误:未捕获的引用错误:_ 未定义。

      shoppingCart.vueimport _ from 'lodash';:

      <script>
        import _ from 'lodash';
      
        export default {
           // ...
        }
      </script>
      

      未捕获的类型错误: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"}

      【讨论】:

      • 这对我来说超级奇怪,为什么要在全局时导入它?它在其他组件中工作得很好。通过导入它就可以工作......超级奇怪
      • 这是因为代码在实际部署到浏览器中运行之前已经过多种预处理。在构建时,上下文非常有限(这是一件好事)并且还没有window。有些代码只在运行时(在浏览器上)运行,而不是在构建时运行,这就是它们不会失败的原因。
      猜你喜欢
      • 2013-03-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-04-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-03-29
      相关资源
      最近更新 更多