How to use helper functions for imported modules in vuejs .vue template?

Question

I have a helper.js file with contains:

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

My .vue file has:

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

I get the following error:

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.

Aleks Vujic · Accepted Answer · 2021-02-26 12:14:26Z

3

Make new helper instance inside your vue component, like below.

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

edited Feb 26, 2021 at 12:14

Aleks Vujic

2,3293 gold badges27 silver badges59 bronze badges

answered Mar 23, 2018 at 6:52

Hax0r

1,8334 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dmitry Kurmanov · Accepted Answer · 2017-02-16 12:29:36Z

1

I think you need to create "data value" for your import value. Could you try something like that:

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

answered Feb 16, 2017 at 12:29

Dmitry Kurmanov

7852 gold badges12 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to use helper functions for imported modules in vuejs .vue template?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related