在vue指令中使用全局函数

Question

我试图在vue指令中使用存档方法(_.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:无法读取未定义的属性“isEmpty”

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

Answer 1

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

• 数据
• 道具
• 方法

不能运行“第三方”代码。

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

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-破折号是很棒的，但是没有必要。