Question

我想在vue文件中使用外部JS函数。

js文件包含方法：

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

Vue文件

<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>

到目前为止，我想我无法以正确的方式在method属性中导入函数。谁能帮我？预先感谢。

Answer 1

您需要像这样更新from django.conf import settings from django.contrib import messages from django.http import HttpResponseRedirect from django.shortcuts import render from django.urls import reverse from django.views.generic import ListView from .models import Membership , UserMembership, Subscription import stripe # Create your views here. def get_user_membership(request): user_membership_qs = UserMembership.objects.filter(user = request.user) if user_membership_qs.exists(): return user_membership_qs.first() return None def get_user_subscription(request): user_subscription_qs = Subscription.objects.filter( user_membership = get_user_membership(request)) if user_subscription_qs.exists(): user_subscription = user_subscription_qs.first() return user_subscription return None def get_selected_membership(request): membership_type = request.session['selected_membership_type'] selected_membership_qs = Membership.objects.filter( membership_type = selected_membership_type) if selected_membership_qs.exists(): return selected_membership_qs.first() return None class MembershipSelectView(ListView): model = Membership def get_context_data(self, *args, **kwargs): context = super().get_context_data(**kwargs) current_membership = get_user_membership(self.request) context['current_membership'] = str(current_membership.membership) return context def post(self, request, **kwargs): selected_membership_type = request.POST.get('membership_type') user_membership = get_user_membership(request) user_subscription = get_user_subscription(request) selected_membership_qs =Membership.objects.filter( membership_type = selected_membership_type) if selected_membership_qs.exists(): selected_membership = selected_membership_qs.first() #validation if user_membership.membership == selected_membership: if user_subscription != None: messages.info(request, "you already have this membership. your \ next payment is due {}".format('get this value from stripe')) return HttpResponseRedirect(request.META.get('HTTP_REFERER')) request.session['selected_membership_type'] = selected_membership.membership_type return HttpResponseRedirect(reverse('memberships:payment')) def PaymentView(request): user_membership = get_user_membership(request) selected_membership = get_selected_membership(request) publishKey = settings.STRIPE_PUBLISHABLE_KEY context = { 'publishKey': publishKey, 'selected_membership': selected_membership } return render(request, "memberships/membership_payment.html", context)对象：

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(); } }。您需要将模板中的值传递给它，并返回结果，否则它将永远不会在UI中显示任何内容：

calculateDiscount.PriceAfterDiscount()

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

如何从Vue js中的外部JS文件导入函数？

js文件包含方法：

Vue文件

2 个答案: