Wordpress Vue Form 获取当前地址

Posted 2023-02-22

【中文标题】Wordpress Vue Form 获取当前地址

【英文标题】：Wordpress Vue Form Get current address

【发布时间】：2021-08-31 21:43:16

【问题描述】：

我正在开发一个使用 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()returnformErrors:,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())));

【参考方案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()
    ))
  
);

【讨论】：

我喜欢它，请原谅我的无知，但上面只是给了我share.getcloudapp.com/nOuPDLLQ，你能否解释一下我如何链接 v-on:click="submit"。返回 gtag_report_conversion(window.location.href)"

这有意义吗？

你能把你原来的sn-p的整个文件贴出来吗？或者至少是 VueJS <script> 部分？还是在不同的文件中？

我已更新问题以显示 vue.js 文件代码

我已经格式化了 vue.js 文件并添加了所需的行，如果你用我发布的内容替换 vue 代码，它应该可以工作??，如果你向下滚动到 methods 阻止你'会看到我添加的评论// ⭐️ Add this