Modifying a fetch request for vuejs

Question

I am new to using a fetch request with vue. I have a fetch request that works great, but want to modify the properties to use the data that is found in the model. Right now it hardcodes everything in it, but need some properties to be dynamic for instance like if the title comes from an input field or if the referral code comes from a cookie.

new Vue({
  el: "#app",
  data: {
title:"jjj",
kol_referrer:localStorage.getItem('shell'),,
url:"https%3A%2F%2Fshared%2Fdoggo%2520(2).png"
  },
  methods: {
    submit: function(){
        fetch("", {
  "headers": {
    "accept": "*/*",
    "accept-language": "en-US,en;q=0.9",
    "content-type": "application/x-www-form-urlencoded",
    "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"96\", \"Google Chrome\";v=\"96\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"macOS\"",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "same-origin"
  },
  "referrer": "",
  "referrerPolicy": "strict-origin-when-cross-origin",
  "body": "title=jjj&url=https%3A%2F%2Fshared%2Fdoggo%2520(2).png&opensInNewWindow=1&isXhr=true&requestId=2&kol_referrer=LxOfRIA4TdeWTYA0rT96AGz",
  "method": "POST",
  "mode": "cors",
  "credentials": "include"
});
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <button v-on:click="submit">Click</button>
</div>

Julien · Accepted Answer · 2021-12-06 23:39:35Z

1

Simply use templates litterals with backticks :

submit: function() {
  let myTitle = "myTitle"
  let myKolReferrer = "foo"
  
  fetch("", {
    "headers": {
      "accept": "*/*",
      "accept-language": "en-US,en;q=0.9",
      "content-type": "application/x-www-form-urlencoded",
      "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"96\", \"Google Chrome\";v=\"96\"",
      "sec-ch-ua-mobile": "?0",
      "sec-ch-ua-platform": "\"macOS\"",
      "sec-fetch-dest": "empty",
      "sec-fetch-mode": "cors",
      "sec-fetch-site": "same-origin"
    },
    "referrer": "",
    "referrerPolicy": "strict-origin-when-cross-origin",
    "body": `title=${myTitle}&kol_referrer=${myKolReferrer}`,
    "method": "POST",
    "mode": "cors",
    "credentials": "include"
  });
}

answered Dec 6, 2021 at 23:39

Julien

8527 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Modifying a fetch request for vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related