Vue模板使用_.escape报错：_未定义，寻求解决方案

这问题我太熟了，核心原因就是模板的作用域和<script>部分不一样，咱们一步步拆解解决：

为什么会报错？ #

你在app.js里把Lodash挂载到了Vue原型的$lodash上，所以在<script>里能通过this.$lodash正常调用方法。但Vue模板的作用域是当前组件的实例，默认只能直接访问实例上的属性/方法，而_并没有被挂载到实例或全局，所以渲染时就会提示"_" is not defined。

具体解决方案 #

方案1：模板里直接用$lodash（最直接） #

既然你已经把Lodash挂到了Vue原型的$lodash上，模板里可以直接访问这个实例属性，把代码改成这样：

<a v-bind:href="'javascript:artist(\'' + $lodash.escape(artist) + '\')'">

这种方式不需要额外修改配置，直接生效。

方案2：把_挂载到全局（快速但不推荐） #

如果就是习惯用_，可以在app.js里把Lodash挂载到window对象上：

// 原有的Lodash导入代码下面加这行
window._ = lodash;

这样不管是模板还是脚本里，都能直接用_了。但这种全局挂载容易造成命名冲突，大型项目不建议这么干。

方案3：组件内定义局部_（更规范） #

在组件的<script>里，把$lodash赋值给组件实例的属性，让模板能直接访问：

export default {
  // ...你的其他组件代码
  created() {
    // 把$lodash赋值给实例的_属性
    this._ = this.$lodash;
  }
}

或者用计算属性的方式（更符合Vue的响应式规范）：

export default {
  computed: {
    _() {
      return this.$lodash;
    }
  }
}

这样模板里就能继续用_.escape(artist)的写法，而且是组件局部的，不会污染全局环境。

额外优化：替换javascript:的写法（更Vue化） #

Vue里其实不推荐用javascript:这种href跳转的写法，建议用@click事件代替，既符合Vue的事件处理逻辑，也更安全：

<a @click="() => artist($lodash.escape(artist))" class="cursor-pointer">

加个cursor-pointer类是为了让链接看起来有可点击的样式（鼠标悬停变手型），你可以自己定义这个CSS类。

内容的提问来源于stack exchange，提问作者Jonathan Hyams