修改 vuejs 的获取请求

Question

我刚开始使用 vue 的获取请求。我有一个非常有效的获取请求，但我想修改属性以使用在模型中找到的数据。现在它对其中的所有内容进行硬编码，但需要一些属性是动态的，例如标题是否来自输入字段或推荐代码是否来自 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>

Answer 1

简单地使用带有反引号的模板文字：

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

修改 vuejs 的获取请求

Modifying a fetch request for vuejs

fetch

vue.js