Vue

by Md. Atiquzzaman Soikat

HTML

<div id="app">
<user-form></user-form>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

Vue.component("nome-input", {
	data(){
  	return {
    	input: ""
    }
  },
  template: `
  <input @input="onInput" type="text" v-model="input">
  `,
  methods: {
  	reset(){
    	this.input = ""
    },
    onInput(){
    	this.$emit('onInput', this.input);
    }
  }
});
Vue.component("user-form", {
	data(){
  	return {
    	name: '',
    }
  },
  components: {
  },
  template: `
  <div>
  	{{name}}
    <nome-input ref="nome" @onInput="updateName"></nome-input>
    <button @click.prevent="save">Save</button>
    <button @click.prevent="reset">reset</button>
  </div>
  `,
  methods: {
  	save(){
    	console.log(this.name);
    },
    reset(){
    	this.name = "";
    	this.$refs.nome.reset();
    },
    updateName(value){
    	this.name = value;
    }
  }
  
});

new Vue({
  el: "#app",
})