如何在vuejs .vue模板中使用导入模块的帮助函数？

Question

我有一个helper.js文件，包含：

module.exports = { 
    getSrmColor: (color) => { 
     return color; 
    } 
} 

我.vue文件有：

<template> 
    <div> 
    {{ recipeHelper.getSrmColor(recipe.color) }} 
    </div> 
</template> 
<script> 
    import recipeHelper from "./helpers.js"; 
    export default { 
     name: "Recipe", 
     props: ["recipe"] 
    } 
</script> 

我得到以下错误：

Property or method "recipeHelper" is not defined on the instance but referenced during render. 
Make sure to declare reactive data properties in the data option. 

Answer 1

我认为你需要为您的导入值创建“数据值”。你可以尝试这样的事情：

<script> 
import recipeHelper from "./helpers.js"; 
export default { 
    name: "Recipe", 
    props: ["recipe"], 
    data: function() {return { 
      recipeHelper: recipeHelper 
    }} 
} 
</script>