- 首页
- 前端开发
- 如何在 vue2 项目上使用 VueStripe?
如何在 vue2 项目上使用 VueStripe?
[英] How to use VueStripe on vue2 Project?
本文介绍了如何在 vue2 项目上使用 VueStripe?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的 vue2 项目中添加了 Vue Stripe，我的代码中有 2 个类似的错误:
<块引用>
类型 'Vue | 中不存在属性 'redirectToCheckout'元素 |(Vue | 元素)[]'.
<块引用>
属性publishableKey"在类型CombinedVueInstance>"上不存在.
我遵循了他们网站上的文档，所有内容都与他们的代码相似，所以我不知道为什么会出现这些错误.
屏幕截图
如果你想检查，这是我的代码
<div class="section form-degustation-section";style="padding-top:150px"><div class="mycontain form-degustation-contain";><a href="/soirees-degustations">retrouner aux calendrier des soirées</a><div class="soiree-text-presentation-contain"><h1>{{degustation[0].title}}</h1><p>{{degustation[0].description }}</p>
<div class="soiree-form-contain"><h2>预订公式</h2><div class="w-form"><div id="wf-form-soirees-degustation";name="wf-form-soirees-degustation";数据名称=晚会品尝"；动作=https://natureetvins.foxycart.com/cart"；方法=发布"><label for="name">Nom et prénom</label><输入类型=文本"类=w-输入"最大长度=256"名称=名称"数据名称=名称"placeholder =Ecrivez votre nom et prénom"id=名称"数据-kwimpalastatus=活着"数据-kwimpalaid=1626170679038-0"><label for="email">电子邮件地址</label><输入类型=电子邮件"类=w-输入"最大长度=256"名称=电子邮件"数据名称=电子邮件"placeholder="Ecrivez votre adresse email";id=电子邮件"必需="数据-kwimpalastatus=活着"数据-kwimpalaid=1626170679038-1"><label for="email-2">Téléphone</label><输入类型=文本"类=w-输入"最大长度=256"名称=字段"数据名称=字段"placeholder =Ecrivez votre numéro de téléphone"id=字段"必需="数据-kwimpalastatus=活着"数据-kwimpalaid=1626170679038-2"><label for=数量">数量</label><input v-model="lineItems[0].quantity";类型=数字"类=w-输入"最大长度=256"placeholder=Combien de Place voulez vous acheter ?";必需="><div class="w-embed"><输入类型=隐藏"名称=名称"值=名称"><输入类型=隐藏"名称=大奖"value=Prix"><输入类型=隐藏"名称=图像"值=图像">
<div class="event-cta-contain"><div><条纹结帐ref=checkoutRef"模式=支付":pk="publishableKey";:line-items="lineItems";:success-url="successURL";:cancel-url="cancelURL";/><button @click="submit()";class=cta-button w-button">付款人
<script lang="ts">从@vue-stripe/vue-stripe"导入{StripeCheckout}；从axios"导入 axios；从'vue'导入Vue；导出默认 Vue.extend({成分: {条纹结帐，},数据() {this.publishableKey = "pk_test_51JAWNYJ3Er0D2qeQ9y9P0RXOsZPfxGC9VVour44gRX2NNiP2CBAzV0NECWsupE5WZhybNBT8TX5TDG5XUOHxg8rg00rMplGIhK"返回 {品尝:[{}],id_product: this.$route.params.id 作为字符串，加载:假，行项目:[{价格:price_1JChqzJ3Er0D2qeQ8cZhp2RM"，数量: 1 ,}],成功网址:http://google.fr"，取消网址:http://google.fr"，};},安装(){公理.get(`http://localhost:3000/api/v1/degustations/${this.id_product}`).then((response) => (this.degustation = response.data));},方法: {提交() {this.$refs.checkoutRef.redirectToCheckout()},},});
我需要导入其他东西吗?
解决方案
这里发生了一些事情.
首先，请记住，如果您想访问模板中的 publishableKey，那么您应该将它添加到您在 data() 功能.
在访问checkoutRef之前尝试做一些检查，试试这个:
if (this.$refs.checkoutRef) {this.$refs.checkoutRef.redirectToCheckout()}
I added Vue Stripe on my vue2 Project and I have 2 similar errors on my code :
Property 'redirectToCheckout' does not exist on type 'Vue | Element | (Vue | Element)[]'.
Property 'publishableKey' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
I followed the documentation on their website and everything is similar as their code so I don't know why I have those errors.
Screenshots
Here is my code if you want to check
<template >
<div class="section form-degustation-section" style="padding-top:150px">
<div class="mycontain form-degustation-contain" >
<a href="/soirees-degustations">retrouner aux calendrier des soirées</a>
<div class="soiree-text-presentation-contain">
<h1>{{ degustation[0].title }}</h1>
<p>{{ degustation[0].description }}</p>
</div>
<div class="soiree-form-contain">
<h2>Formulaire de réservation</h2>
<div class="w-form">
<div id="wf-form-soirees-degustation" name="wf-form-soirees-degustation" data-name="soirees degustation" action="https://natureetvins.foxycart.com/cart" method="post">
<label for="name">Nom et prénom</label>
<input type="text" class="w-input" maxlength="256" name="name" data-name="Name" placeholder="Ecrivez votre nom et prénom" id="name" data-kwimpalastatus="alive" data-kwimpalaid="1626170679038-0">
<label for="email">Email Address</label>
<input type="email" class="w-input" maxlength="256" name="email" data-name="Email" placeholder="Ecrivez votre adresse email" id="email" required="" data-kwimpalastatus="alive" data-kwimpalaid="1626170679038-1">
<label for="email-2">Téléphone</label>
<input type="text" class="w-input" maxlength="256" name="field" data-name="Field" placeholder="Ecrivez votre numéro de téléphone" id="field" required="" data-kwimpalastatus="alive" data-kwimpalaid="1626170679038-2">
<label for="quantity" >Quantité</label>
<input v-model="lineItems[0].quantity" type="number" class="w-input" maxlength="256" placeholder="Combien de places voulez vous acheter ?" required="">
<div class="w-embed">
<input type="hidden" name="name" value="Name">
<input type="hidden" name="prix" value="Prix">
<input type="hidden" name="image" value="Image">
</div>
<div class="event-cta-contain">
<div>
<stripe-checkout
ref="checkoutRef"
mode="payment"
:pk="publishableKey"
:line-items="lineItems"
:success-url="successURL"
:cancel-url="cancelURL"
/>
<button @click="submit()" class="cta-button w-button">Payer</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { StripeCheckout } from "@vue-stripe/vue-stripe";
import axios from "axios";
import Vue from 'vue';
export default Vue.extend({
components: {
StripeCheckout,
},
data() {
this.publishableKey = "pk_test_51JAWNYJ3Er0D2qeQ9y9P0RXOsZPfxGC9VVour44gRX2NNiP2CBAzV0NECWsupE5WZhybNBT8TX5TDG5XUOHxg8rg00rMplGIhK";
return {
degustation: [{
}],
id_product: this.$route.params.id as string,
loading: false,
lineItems:[
{
price: "price_1JChqzJ3Er0D2qeQ8cZhp2RM",
quantity: 1 ,
}],
successURL: "http://google.fr",
cancelURL: "http://google.fr",
};
},
mounted() {
axios
.get(`http://localhost:3000/api/v1/degustations/${this.id_product}`)
.then((response) => (this.degustation = response.data));
},
methods: {
submit() {
this.$refs.checkoutRef.redirectToCheckout()
},
},
});
</script>
Do I need to import something else or ?
解决方案
A couple of things are happening here.
First, keep in mind that if you want to access the publishableKey in the template then you should add it in the object that you're returning in the data() function.
Try to do some checking before accessing checkoutRef, try this:
if (this.$refs.checkoutRef) {
this.$refs.checkoutRef.redirectToCheckout()
}
这篇关于如何在 vue2 项目上使用 VueStripe?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
