时间戳

首页 > 解决方案 > Vuejs 不能在模板中使用 lodash 但它适用于代码

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

问题描述

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

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

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

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

显示未定义的错误：

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

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

标签： vue.jslodashundefined

解决方案

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

例子：

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

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

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

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

推荐阅读