JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="app">
  <form @submit="submit" action="#" method="post">
    <field-input :label="'Descrição'" v-model="record.description"></field-input>
    <button>Enviar</button>
  </form>
  <hr>
  <pre><div v-for="entry in log" v-html="entry"></div></pre>
</div>

CSS

body {
  padding: 10px;
}

JavaScript

bootstrap()

new Vue({
  el: '#app',
  data: () => ({
  	record: {
    	description: ''
    },
  	log: []
  }),
  methods: {
    submit($event) {
    	this.log.push(`Save ${JSON.stringify(this.record)}`)
      $event.preventDefault()
    }
  }
})


function bootstrap() {
	Vue.component('field-input', {
    props: {
      label: {
        type: String
      },
      value: {
      	default: () => (undefined)
      }
    },
    template: '<div class="form-group">' +
        '<label>{{ label }}</label>' +
        `<input class="form-control" :value="value" @input="$emit('input', $event.target.value)"/>` +
      '</div>'
  })
}