Question

我试图在vue指令中使用lodash方法（_.isEmpty），如下所示：

<div class="post" v-for="post in posts"></div>
    ...
    <div class="comments" v-if="! _.isEmpty(post.comments)">
      <div class="comment" v-for="comment in post.comments"></div>
    </div>
    ...
</div>

但收到以下错误：

未捕获的TypeError：无法读取属性＆＃39; isEmpty＆＃39;未定义的

似乎vue正在寻找当前范围内的_.isEmpty方法。在这种情况下我应该如何调用全局函数？

Answer 1

您只能访问模板中当前Vue实例/组件的功能：

数据
道具
方法

否＆＃34;第三方＆＃34;代码可以运行。

因此，您必须在Vue组件中创建一个方法来代理lodash方法：

methods: {
  isEmpty: function (arr) { return _.isEmpty(arr)}
}

并在模板中使用此方法：

<div class="comments" v-if="! isEmpty(post.comments)">

Answer 2

为什么不将_添加到您的Vue组件：

data(){
  return {
    _:require('lodash')  //or however you include it. maybe just window._
  }
}

然后就可以访问了。如果_是有效的对象密钥，则不是肯定的，因此如果需要，可以将其称为lo或lodash。

另外，假设注释是一个数组，使用v-if='post.comments.length'就没有问题。如果你已经知道它是一个数组，那么Lo-dash是很棒但不必要的。

在vue指令中使用全局函数

2 个答案: