Как импортировать функцию из внешнего JS файла в Vue js?

Question

Я хочу использовать внешнюю функцию JS в файле vue.

Js файл содержит метод:

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>

Я думаю, я не могу импортировать функцию в свойстве метода в правильном порядке. Может кто-нибудь мне помочь? Заранее спасибо.

Answer 1

Вам необходимо обновить calculateDiscount объект, например:

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

, а затем CalculateDiscount.PriceAfterDiscount(); должен работать нормально.

В шаблоне вы вызывали функцию Discount с двумя такие параметры как:

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

но в реальном коде вы ничего не передали:

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

Кроме того, вы ничего не передали calculateDiscount.PriceAfterDiscount(). Вам нужно передать значения из шаблона в это, а также вернуть результат, иначе он никогда не будет ничего печатать в пользовательском интерфейсе:

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

Answer 2

JavaScript модули работают как пространства имен и не нуждаются в дополнительном литерале объекта или классе, чтобы обернуться вокруг экспорта.

PriceAfterDiscount не зависит от calculateDiscount членов и не нуждается в быть определенным как его часть.

Может быть:

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

И импортироваться как:

import { PriceAfterDiscount } from "@/utilities/CalculateDiscount"; 

PriceAfterDiscount(...);

Или, если ему нужно пространство имен:

import * as calculateDiscount from "@/utilities/CalculateDiscount"; 

calculateDiscount.PriceAfterDiscount(...);