Question

我试图在我的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”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

我的package.json文件中有以下lodash条目：

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

Answer 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);
        }
    }
}

如何导入lodash单功能并在Vue.js模板上使用？

1 个答案: