Wordpress Vue Form Get current address

Question

I am working on a WordPress theme that uses Vue/PHP partials. On Submit I need an onclick event return gtag_report_conversion('current URL')".

How do I call the PHP for wordpresses current URL address in the vue form. As you can see I have tried a few things including {{ }} but it shows nothing.

Basically, I need to know how to interpolate the PHP into the Vue form.



                            Submit for Quotation

Update:

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

user_6653426 · Answer

You can use JavaScript to get this URL instead of PHP with window.location.href

Like this:

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

Note that you should probable use the Vue click handler instead of adding another one that might not play nicely with the Vue one.

v-on:click="submit"

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

Update:

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

Wordpress Vue Form Get current address

1 Answers