Vuejs 不能在模板中使用 lodash 但它适用于代码

Question

我在全球范围内导入了 lodash：

window._ = require('lodash'); // app.js

当我像在方法中一样在代码上使用它时，它工作正常。但是当我尝试在像这样的模板中使用它时：

{{_.get(user, 'address.name')}}

显示未定义的错误：

Property or method "_" is not defined on the instance but referenced during render

为什么会这样？我可以重构创建一个新变量并在代码中分配值，它会起作用，但我也想直接在模板上使用它。

Answer 1

这可能是因为渲染（所以属性 "_" 的调用）是在他实例化之前完成的。

在您的情况下，您可能必须在渲染之前调用的 created 生命周期回调中设置 window._。

但我的建议是在您的组件的 "data" 属性中设置它，甚至只导入和设置您需要的功能。

例如：

import clone from 'lodash/clone'

Answer 2

扩展我的评论：我通常不鼓励在 VueJS 模板中使用第三方 util/helper 方法。当然，这是个人选择，但让 VueJS 直接处理渲染要简单得多（并且还可以防止可能出现的反应性问题）。因此，您可以简单地使用计算属性（或方法，如果您需要传递参数）来生成插入到模板中的字符串。

示例：

computed: {
  addressName() {
    return _.get(this.user, 'address.name');
  }
}

然后，在您的模板中，您可以简单地使用 {{ addressName }} 来呈现字符串。如果您需要更多的动态使用和更多的灵活性和抽象，您可以改用方法。例如，如果您的路径将是动态的，则您可以创建一个方法，该方法使用提供的 path 参数从 this.user 检索数据：

methods: {
  userData(path) {
    return _.get(this.user, path);
  }
}

在您的模板中，您可以简单地使用 {{ userData('address.name') }}。

Vuejs can't use lodash inside template but it works on code