如何导入 lodash 单个函数并在 Vue.js 模板上使用？答案

【问题标题】：How to import lodash single function and use on Vue.js template?如何导入 lodash 单个函数并在 Vue.js 模板上使用？
【发布时间】：2019-06-25 19:02:09
【问题描述】：

我尝试在我的 Vue.js 组件中导入单个 Lodash 函数，如下所示：

<template>
   <div>
      <span v-if="!isEmpty(example)">{{example}}</span>
   </div>
</template>

<script>
import isEmpty from "lodash/isEmpty"

export default {
    data () {
        return { example: "Some text" }
    }
}
</script>

但是当我在模板中使用它时，它给出了这个错误：

[Vue 警告]：属性或方法“isEmpty”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

我的 package.json 文件中有这个 lodash 条目：

"dependencies": {
    "lodash": "^4.17.11"
}

【问题讨论】：

标签： vue.js webpack lodash

【解决方案1】：

我认为您的选择是通过data 传递函数：

export default {
    data () {
        return { 
            isEmpty: isEmpty,
            example: "Some text",
        }
    }
}

或者创建一个计算属性：

<span v-if="!exampleTextEmpty">{{example}}</span>

// ...

export default {
    data () {
        return { example: "Some text" }
    },
    computed: {
        exampleTextEmpty() {
            return isEmpty(this.example);
        }
    }
}

【讨论】：