Vuejs不能在模板中使用lodash,但它可以在代码中使用

2j4z5cfb  于 2023-02-05  发布在  Vue.js
关注(0)|答案(3)|浏览(214)

我已在全球范围内进口了lodash:

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

当我在代码中使用它时,比如在方法中,它工作得很好。但是当我试图在模板中使用它时,比如:

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

显示未定义错误:

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

为什么会这样呢?我可以重构一个新的变量,然后在代码中赋值,这样就可以了,但是我也想直接在模板上使用它。

ctehm74n

ctehm74n1#

关于我的评论:我通常不鼓励在VueJS模板中使用第三方util/helper方法。当然,这是个人的选择,但让VueJS直接处理渲染要简单得多(同时也可以防止可能的React问题)。因此,您可以简单地使用一个计算属性(或一个方法,如果您需要传递参数)来生成字符串,然后插入到模板中。
示例:

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

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

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

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

2jcobegt

2jcobegt2#

这可能是因为呈现(因此调用属性“_”)在示例化之前完成。
在您的情况下,可能必须在渲染之前调用的created生命周期回调中设置window._
但我的建议是在组件的“data”属性中设置此属性,甚至只导入和设置所需的函数。
例如:

import clone from 'lodash/clone'
7rfyedvj

7rfyedvj3#

适用于希望lodash在所有文件中全局可用和/或使用lodash.mixin s的用户。

我决定在template中使用app.provide和inject,我想在其中使用lodash。唯一的问题是我不能使用_,我不得不解决$_

文件结构

.
├── src
│   ├── components
│   │   └── BaseBtn.vue
│   └── utils
│       ├── global
│       │   └── plugins.js
│       └── plugins
│           └── lodash.js
└── main.js

主文件.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import '@/utils/plugins/lodash'
import App from './App.vue'
import router from './router'
import registerGlobalPlugins from '@/utils/global/plugins'

import './assets/scss/index.scss'

const app = createApp(App)

app.use(createPinia())
app.use(router)
registerGlobalPlugins(app)

app.mount('#app')

源代码/实用程序/插件/lodash.js

import _ from 'lodash'

export const lodashMixin = {
  /** Converts obj keys to camelCase */
  $camelCaseKeys (object) {
    return _.mapKeys(object, (_value, key) => _.camelCase(key))
  },

  /** Pauses code for x milliseconds */
  $pause (milliseconds) {
    return new Promise((resolve) => setTimeout(resolve, milliseconds))
  },
}

_.mixin(lodashMixin)
window._ = _

export const lodashPlugin = {
  install (app) {
    app.provide('$_', _)
  },
}

源代码/组件/基础按钮.vue

<template>
  <button>
    {{ $_.sample(['this', 'is', 'an', 'example']) }}
  </button>
</template>

<script>
export default {
  inject: ['$_'],

  methods: {
    async handleClick () {
      await _.$pause(500) // this will work due to import in main.js
      await this.$_.$pause(500) // this should also work via the inject
    }
  }
}
</script>

相关问题