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>