jaydson

<!-- CustomInput.vue -->
<template>
...
    <p v-if="error">{{ error }}</p>
...
</template>

<script>
...
  data() {

jaydson

<!-- CustomInput.vue -->
<template>
...
    <input type="text" :name="name" :value="value" @input="onInput" />
...
</template>

<script>
...
  methods: {

jaydson

<!-- CustomInput.vue -->
<template>
  <label>
    {{ label }}
    <input type="text" :name="name" :value="value" @input="$emit('input', $event.target.value)" />
  </label>
</template>

<script>
export default {

jaydson

<!-- App.vue -->
<template>
  <custom-input :label="label" :value="model" />
</template>

...

jaydson

<!-- CustomInput.vue -->
<template>
  <label>
    {{ label }}
    <input type="text" :name="name" v-model="value" />
  </label>
</template>

<script>
export default {

jaydson

<!-- App.vue -->
<template>
  <custom-input :label="label" v-model="model" />
</template>

<script>
import CustomInput from './components/CustomInput.ue';

export default {
  name: 'App',

jaydson

<template>
  <label>
    Username
    <input type="text" name="username" v-model="username">
  </label>
</template>

<script>
export default {
  name: 'UsernameInput',

jaydson

fetch(URL_TO_POST, {
  method: 'post',
  body: new FormData(document.querySelector('#my-form'))
})
.then(function(response) { 
  // trate a resposta aqui
}); 

jaydson

// Podemos instanciar um Header já passando um objeto  
// com as propriedades que queremos setar  
let headers = new Headers({
  'Content-Type': 'text/plain',
  'X-Custom-Header': 'valor'
});

// mas também podemos adicionar programaticamente
// depois de já termos instanciado
headers.append('X-Custom-Header', 'valor');

jaydson

fetch(URL_TO_FETCH, {
  method: 'POST',
  mode: 'cors', // pode ser cors ou basic(default)
  redirect: 'follow',
  headers: new Headers({
    'Content-Type': 'text/plain'
  })
})
.then(function(response) {
  // tratar a response