Vue.js如何修改fetch请求，将硬编码参数替换为模型动态数据

1 修正原有代码语法错误 #

你现有JS代码的data配置中，kol_referrer行末尾多了一个多余的逗号，先删除避免运行报错。

2 修改HTML增加输入字段绑定 #

给页面增加输入框，通过v-model和Vue实例的title属性双向绑定，输入框内容变更会自动同步到data中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <!-- 新增输入框绑定title -->
  <input type="text" v-model="title" placeholder="请输入标题">
  <button v-on:click="submit">Click</button>
</div>

3 重构fetch请求使用动态参数 #

因为你的请求头content-type是application/x-www-form-urlencoded格式，推荐用URLSearchParams来构建请求体，自动处理参数编码，避免手动拼接字符串的转义问题。所有动态值直接通过this访问Vue实例的data属性即可：

new Vue({
  el: "#app",
  data: {
    title:"jjj",
    // 如果你需要从cookie取值而非localStorage，可替换为下方getCookie方法的返回值
    kol_referrer: localStorage.getItem('shell'),
    url:"https%3A%2F%2Fshared%2Fdoggo%2520(2).png"
  },
  methods: {
    // 可选：如果需要从cookie获取推荐码，新增这个工具方法
    getCookie: function(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
    },
    submit: function(){
      // 构建动态请求体
      const bodyParams = new URLSearchParams();
      bodyParams.append('title', this.title);
      bodyParams.append('url', this.url);
      bodyParams.append('opensInNewWindow', '1');
      bodyParams.append('isXhr', 'true');
      bodyParams.append('requestId', '2');
      bodyParams.append('kol_referrer', this.kol_referrer);
      
      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": bodyParams.toString(),
        "method": "POST",
        "mode": "cors",
        "credentials": "include"
      });
    }
  }
})

注意说明 #

• 所有Vue实例data中的属性，都可以在methods中通过this.属性名直接访问，数据更新后请求参数会自动使用最新值
• URLSearchParams会自动对参数值做url编码，无需手动处理特殊字符
• 如果需要从cookie取值，把kol_referrer的赋值改为this.getCookie('你的推荐码cookie键名')即可

内容的提问来源于stack exchange，提问作者Vzupo