Wordpress Vue Form 获取当前地址

Question

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

如何在 vue 表单中调用 PHP for wordpresses 当前 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()
    }))
  }
});