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.

palaѕн · Accepted Answer · 2020-04-11 07:27:41Z

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);
   }
}

edited Apr 11, 2020 at 7:27

answered Apr 11, 2020 at 6:03

palaѕн

74.2k17 gold badges122 silver badges140 bronze badges

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

6 Comments

Osman Rafi Over a year ago

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ѕн Over a year ago

Could you please create a small demo in codesandbox or codepen to show the issue happening.

Osman Rafi Over a year ago

here is the code demo codesandbox.io/s/serene-sanderson-3h9h5?file=/src/App.vue

palaѕн Over a year ago

It seems the demo is not updated, as calculateDiscount or PriceAfterDiscount is not declare anywhere or used anywhere?

palaѕн Over a year ago

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

|

Estus Flask · Accepted Answer · 2020-04-11 06:33:38Z

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(...);

Collectives™ on Stack Overflow

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

Js file contains the method:

Vue file

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

Js file contains the method:

Vue file

2 Answers 2

6 Comments

Comments

Related