POST后使用Vue.js解码href URL链接和重定向页面

时间:2018-11-16 13:41:57

标签: javascript html vue.js vuejs2 vue-component

我有两个页面的示例Vue.js设置。产品列表,然后是订单。

https://listorder.netlify.com

问题1-从产品传递到订单页面输入的URL得到编码。我曾尝试使用encodeURI()进行解码,但它仍然输出已编码。

<a class="btn btn-primary btn-pill" v-bind:href="'order.html?product=' + decodeURI(item.title) + '&' ?price=' + decodeURI(item.price)"  style="color:white;">Buy Now</a>

问题2-POST完成后,我需要重定向到Paypal页面,并在订单页面的“价格”字段中添加数据。不确定是此处需要Vue还是将其添加到现有的javascript中。

Paypal页面重定向到https://www.paypal.me/wereallcatshere/USD,然后附加“价格”字段

JAVASCRIPT

form.addEventListener('submit', e => {
    e.preventDefault()
    showLoadingIndicator()
    fetch(scriptURL, { method: 'POST', body: new FormData(form) })
        .then(response => showSuccessMessage(response))
        .catch(error => showErrorMessage(error))
})

function showSuccessMessage(response) {
    console.log('Success!', response)
    setTimeout(() => {
        successMessage.classList.remove('is-hidden')
        loading.classList.add('is-hidden')
    }, 500)
}

VUE

<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      items: []
    },
    created: function () {
      fetch('listorder.json')
        .then(resp => resp.json())
        .then(items => {
          this.items = items;
        })
    },
    methods: {
      redirect: function () {
        window.location.href = "https://www.paypal.me/wereallcatshere/USD" + item.price;
      }
    }
  });

0 个答案:

没有答案
相关问题