Wordpress Vue Form获取当前地址

Question

我正在开发一个使用Vue/PHP部分的WordPress主题。在提交时，我需要一个onclick事件返回gtag_report_conversion("当前URL"(；。

我如何在vue形式中调用wordpress的PHP当前URL地址。正如你所看到的，我已经尝试了一些东西，包括{{ <?php get_permalink( get_the_ID() ); ?> }}，但它什么都没有显示。

基本上，我需要知道如何将PHP插入Vue表单

<form action="#" class="bg-light p-6" method="post" role="form">
<div class="mb-6 text-center font-size-110 font-weight-600">Submit for Quotation</div>
<template v-if="isFormSubmitted">
<div class="opacity-50 font-size-90">
Thank you for your inquiry!<br><br>One of our event planners will review your requests and get a quotation to you within 48 hours.
</div>
</template>
<template v-else>
<div class="alert alert-danger font-size-85" v-if="formErrors._">{{ formErrors._ }}</div>
<div class="form-group">
<label class="font-size-80 text-uppercase">First Name*</label>
<input class="form-control" maxlength="40" placeholder="" type="text" v-model="formFields.name_first">
<div class="text-danger font-size-75 mt-3 font-weight-600" v-if="formErrors.name_first">{{ formErrors.name_first }}</div>
</div>
<div class="form-group">
<label class="font-size-80 text-uppercase">Last Name*</label>
<input class="form-control" maxlength="40" placeholder="" type="text" v-model="formFields.name_last">
<div class="text-danger font-size-75 mt-3 font-weight-600" v-if="formErrors.name_last">{{ formErrors.name_last }}</div>
</div>
<div class="form-group">
<label class="font-size-80 text-uppercase">Phone Number*</label>
<input class="form-control" maxlength="20" placeholder="" type="tel" v-model="formFields.phone">
<div class="text-danger font-size-75 mt-3 font-weight-600" v-if="formErrors.phone">{{ formErrors.phone }}</div>
</div>
<div class="form-group">
<label class="font-size-80 text-uppercase">Email</label>
<input class="form-control" maxlength="254" placeholder="" type="email" v-model="formFields.email">
<div class="text-danger font-size-75 mt-3 font-weight-600" v-if="formErrors.email">{{ formErrors.email }}</div>
</div>
<div class="form-group">
<label class="font-size-80 text-uppercase">Date of Event</label>
<input class="form-control" maxlength="100" placeholder="" type="text" v-model="formFields.date">
<div class="text-danger font-size-75 mt-3 font-weight-600" v-if="formErrors.date">{{ formErrors.date }}</div>
</div>
<div class="form-group">
<label class="font-size-80 text-uppercase">Location of Event / Suburb</label>
<input class="form-control" maxlength="100" placeholder="" type="text" v-model="formFields.location">
<div class="text-danger font-size-75 mt-3 font-weight-600" v-if="formErrors.location">{{ formErrors.location }}</div>
</div>
<div class="form-group">
<label class="font-size-80 text-uppercase">Type of Event</label>
<input class="form-control" maxlength="100" placeholder="" type="text" v-model="formFields.type">
<div class="text-danger font-size-75 mt-3 font-weight-600" v-if="formErrors.type">{{ formErrors.type }}</div>
</div>
<div class="form-group">
<label class="font-size-80 text-uppercase">Comments</label>
<textarea class="form-control" maxlength="500" placeholder="" v-model="formFields.comments"></textarea>
<div class="text-danger font-size-75 mt-3 font-weight-600" v-if="formErrors.comments">{{ formErrors.comments }}</div>
</div>
<button
class="btn btn-primary btn-sm btn-block text-white mt-4"
type="button"
onclick="return gtag_report_conversion('{{ <?php get_permalink( get_the_ID() ); ?> }}')"
v-on:click="submit"
v-bind:disabled="isFormSubmitting"
>
<template v-if="isFormSubmitting"><i class="far fa-spinner fa-spin font-size-120"></i></template>
<template v-else>Submit</template>
</button>
</template>
</form>

更新：

const CatalogItemsSaved=Vue.component("CatalogItemsSaved",{data:function(){return{formErrors:{},formFields:{comments:null,email:null,name_first:null,name_last:null,phone:null,date:null,location:null,type:null},items:[],isLoaded:!1,isLoading:!1,isFormSubmitted:!1,isFormSubmitting:!1}},computed:{},methods:{submit:function(){this.isFormSubmitted=!1,this.isFormSubmitting=!0,this.formErrors={};let t=this.formFields;t.action="catalog_quotation_submission",$.post(extraPath+"wp-admin/admin-ajax.php",t,(t=>{t.errors?this.formErrors=t.errors:this.isFormSubmitted=!0,this.isFormSubmitting=!1}),"json")},load:function(){this.isLoading=!0,$.post(extraPath+"wp-admin/admin-ajax.php",{action:"catalog_saved"},(t=>{this.items=t,this.isLoading=!1,this.isLoaded=!0}),"json")},reload:function(){this.isLoaded=!1,this.items=[],this.load()},remove:function(t,i){Vue.delete(this.items,i);let o=this.$cookies.get("catalog_saved"),s=[];if(o){s=JSON.parse(o);for(let i in s)s[i]==t.ID&&s.splice(i,1);this.$cookies.set("catalog_saved",JSON.stringify(s),"7d")}eventHub.$emit("catalog-item-removed",t)},updateQuantity:function(t){return this.$cookies.set("catalog_"+t.ID,t.qty,"7d")}},created:function(){eventHub.$on("catalog-item-saved",(t=>{this.reload()}))},mounted:function(){$("#modal-catalog-items-saved").on("show.bs.modal",(()=>{this.isLoaded||this.load()}))}});

Answer 1

您可以使用JavaScript获取此URL，而不是使用window.location.href的PHP

像这样：

onclick="return gtag_report_conversion(window.location.href)"

请注意，您可能应该使用Vue点击处理程序，而不是添加另一个可能与Vue不太匹配的处理程序。

v-on:click="submit"

methods: {
submit () {
gtag_report_conversion(window.location.href) // add here ⭐️
// whatever your original submit code is
}
}

更新：

const CatalogItemsSaved = Vue.component("CatalogItemsSaved", {
data: function () {
return {
formErrors: {},
formFields: {
comments: null,
email: null,
name_first: null,
name_last: null,
phone: null,
date: null,
location: null,
type: null
},
items: [],
isLoaded: false,
isLoading: false,
isFormSubmitted: false,
isFormSubmitting: false
}
},
computed: {},
methods: {
submit: function () {
gtag_report_conversion(window.location.href); // ⭐️ Add this
this.isFormSubmitted = false, this.isFormSubmitting = true, this.formErrors = {};
let t = this.formFields;
t.action = "catalog_quotation_submission", $.post(extraPath + "wp-admin/admin-ajax.php", t, (t => {
t.errors ? this.formErrors = t.errors : this.isFormSubmitted = true, this.isFormSubmitting = false
}), "json")
},
load: function () {
this.isLoading = true, $.post(extraPath + "wp-admin/admin-ajax.php", {
action: "catalog_saved"
}, (t => {
this.items = t, this.isLoading = false, this.isLoaded = true
}), "json")
},
reload: function () {
this.isLoaded = false, this.items = [], this.load()
},
remove: function (t, i) {
Vue.delete(this.items, i);
let o = this.$cookies.get("catalog_saved"),
s = [];
if (o) {
s = JSON.parse(o);
for (let i in s) s[i] == t.ID && s.splice(i, 1);
this.$cookies.set("catalog_saved", JSON.stringify(s), "7d")
}
eventHub.$emit("catalog-item-removed", t)
},
updateQuantity: function (t) {
return this.$cookies.set("catalog_" + t.ID, t.qty, "7d")
}
},
created: function () {
eventHub.$on("catalog-item-saved", (t => {
this.reload()
}))
},
mounted: function () {
$("#modal-catalog-items-saved").on("show.bs.modal", (() => {
this.isLoaded || this.load()
}))
}
});