Modifying a fetch request for vuejs-CodePudding

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://shared/doggo%20(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://shared/doggo%20(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>

CodePudding user response：

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