在 vue 指令中使用全局函数答案

【问题标题】：Use global functions in vue directives在 vue 指令中使用全局函数
【发布时间】：2016-04-05 11:03:55
【问题描述】：

我正在尝试在 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>

但出现以下错误：

未捕获的类型错误：无法读取未定义的属性“isEmpty”

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

【问题讨论】：

标签： vue.js

【解决方案1】：

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

数据
道具
方法

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

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

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

并在模板中使用此方法：

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

【讨论】：

作为 vue.js 的新手，我的心都碎了！
好吧，这是故意的：业务逻辑不属于模板。调试和重构是一场噩梦。当然，sweet short little lodash 函数不会造成太大伤害，但系统不能或不应该为 sweet little lodash 函数设置例外 ;)。话虽如此，您可能可以将 lodash 作为实例方法注入 Vue：Vue.prototype._ = _，这应该允许您在视图中以 _ 的身份访问它 - 但我不推荐它。

【解决方案2】：

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

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

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

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

【讨论】：