Fetch , how to pass a string from input to header header?

Question

Vue.js

There is a form, in input I enter a key (string) how to pass it to header , to fetch
Headers:
“Key”: data from input ?
It's just that the constant works if the constant is assigned a string from the input 404 error, if I substitute the key in the code directly, then everything is fine, the answer is 200, I don’t provide the code, because I don’t see the point, but if I need to throw it off

Answer 1

I would read the documentation
https://developer.mozilla.org/ru/docs/Web/API/Fetc...

// Пример отправки POST запроса:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *client
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return await response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
  .then((data) => {
    console.log(data); // JSON data parsed by `response.json()` call
  });

It's funny but I wrote the code in the sandbox. https://jsfiddle.net/vkorotenko/jcmetvp8/13/
It looks like you just can't explain