How to use external functions in Vue Component data binding?

Question

I'm js newbie, I want to use external functions in vue component data bindings but it fails to work

helper.js

function groupArrayOfObjects(list, key) {  
    return blah blah
}

function parseDate(d) {      
    return bla bla
}

export { groupArrayOfObjects, parseDate };

vue component:

Vue warn]: Property or method "parseDate" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

 <template>
          <div>{{parseDate(date) }}</div>  
    </template>

    import { groupArrayOfObjects, parseDate } from "@/assets/js/helper.js";
    export default {
        methods:{
          abc(){ groupArrayOfObjects(param1, param2);}
        }
    }

Saadi · Accepted Answer · 2022-06-02 06:25:49Z

1

Try to spread the helper functions inside the methods option :

import * as helpers from "@/assets/js/helper.js";

export default {
  methods: {
    abc() { groupArrayOfObjects(param1, param2); },
    ...helpers
   
  }
}

in template :

 <template>
   <div>{{parseDate(date) }}</div>  
 </template>

edited Jun 2, 2022 at 6:25

Saadi

2,2376 gold badges24 silver badges53 bronze badges

answered Apr 7, 2021 at 11:23

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Comments

Florian Pallas · Accepted Answer · 2021-04-07 11:06:28Z

1

You can't use imported functions in your template, as they are not really part of the component. If you want to use those imported functions you need to add them to your components method object. Similar to what you already did with your groupArrayOfObjects function.

import { groupArrayOfObjects, parseDate } from "@/assets/js/helper.js";

export default {
  methods: {
    abc() { groupArrayOfObjects(param1, param2); },
    
    // either wrap your function
    foo(date) { parseDate(date) },
    
    // or just add it directly
    parseDate,
  }
}

answered Apr 7, 2021 at 11:06

Florian Pallas

5821 gold badge5 silver badges11 bronze badges

Comments

Saadi · Accepted Answer · 2022-06-02 06:25:06Z

0

You can import the parseDate function from helper and expose this function for the template.

 <template>
  <div>{{ parseDate(date) }}</div>
</template>

<script>
import { parseDate } as helpers from "@/assets/js/helper.js";

export default {
  methods: {
    parseDate
  }
}
</script>

edited Jun 2, 2022 at 6:25

Saadi

2,2376 gold badges24 silver badges53 bronze badges

answered Jun 1, 2022 at 8:07

Олег Сергеевич

11 bronze badge

1 Comment

Besworks Over a year ago

While this might be a valid solution you should include some explanation about why it works and how it solves the problem. Don't forget to quote and link to any relevant documentation.

Collectives™ on Stack Overflow

How to use external functions in Vue Component data binding?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related