How to import a function from external JS file in Vue js?

Question

I want to use an external JS function into a vue file.

Js file contains the method:

let calculateDiscount = {
 PriceAfterDiscount(price, discountPercentage) {
 const discountAmount = (discountPercentage * price) / 100;
 return price - discountAmount;
 }
};
export default calculateDiscount;

Vue file

<template>
 <div v-for="product in product_data" :key="product.id">
 <h4> ${{ Discount(product.price, product.sale) }}</h4>
 </div>
</template>
<script>
 import CalculateDiscount from "@/utilities/CalculateDiscount"; //js file containing the method
 name: "ShowProduct",
 methods: {
 Discount(){
 CalculateDiscount.PriceAfterDiscount();
 }
 }
</script>

I far I guess I can't import the function in method property in the right manner. Can anyone help me? Thanks in advance.

Answer 1

You need to update calculateDiscount object like:

let calculateDiscount = {
 PriceAfterDiscount: (price, discountPercentage) => {
 const discountAmount = (discountPercentage * price) / 100;
 return price - discountAmount;
 }
};

and then CalculateDiscount.PriceAfterDiscount(); should work fine.

In the template, you had called Discount function with two params like:

{{Discount(product.price,product.sale)}}

but in actual code you had passed nothing:

methods: {
 Discount() {
 calculateDiscount.PriceAfterDiscount();
 }
}

Also, you have passed nothing to calculateDiscount.PriceAfterDiscount(). You need the pass the values from template to this and also return the result, otherwise it will never print nothing in UI:

methods: {
 Discount(price, sale) {
 return calculateDiscount.PriceAfterDiscount(price, sale);
 }
}

• Osman Rafi: I updated the object as you suggested. it shows me "vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Object(...) is not a function" found in" error.
• palaѕн: Could you please create a small demo in codesandbox or codepen to show the issue happening.
• Osman Rafi: here is the code demo codesandbox.io/s/serene-sanderson-3h9h5?file=/src/App.vue
• palaѕн: It seems the demo is not updated, as calculateDiscount or PriceAfterDiscount is not declare anywhere or used anywhere?
• palaѕн: Your code works fine now. In template you had called Discount function with two params like Discount(product.price,product.sale) but in actually code you had passed nothing methods: { Discount() {. Also, you have to return the calculateDiscount.PriceAfterDiscount() result otherwise it will never print anything in UI. Updated Demo

Answer 2

JavaScript modules work as namespaces and don't need additional object literal or class to be wrapped around exports.

PriceAfterDiscount doesn't rely on calculateDiscount members and doesn't need to be defined as a part of it.

It can be:

export function PriceAfterDiscount(price, discountPercentage) {
 const discountAmount = (discountPercentage * price) / 100;
 return price - discountAmount;
 }
};

And imported like:

import { PriceAfterDiscount } from "@/utilities/CalculateDiscount"; 
PriceAfterDiscount(...);

Or if it needs a namespace:

import * as calculateDiscount from "@/utilities/CalculateDiscount"; 
calculateDiscount.PriceAfterDiscount(...);