Vue

by WILLIAM CORREA

HTML

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

<template id="MyForm" type="x/template">
  <div class="MyForm">
    <div>
      <div>Tipo de Pessoa</div>
      <label>
        <small>Pessoa Física</small>
        <input
          v-model="personType"
          type="radio"
          value="pessoa-fisica"
          @change="changeSelected('pessoa-fisica')"
        >
      </label>
      <label>
        <small>Pessoa Jurídica</small>
        <input
          v-model="personType"
          type="radio"
          value="pessoa-juridica"
          @change="changeSelected('pessoa-juridica')"
        >
      </label>
    </div>
    <div>
      <div>Documento</div>
      <label v-show="selected === 'pessoa-fisica'">
        <small>CPF</small> <input v-model="CPF">
      </label>
      <label v-show="selected === 'pessoa-juridica'">
        <small>CNPJ</small> <input v-model="CNPJ">
      </label>
    </div>
  </div>
</template>

CSS

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

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

.MyForm > div {
  margin-bottom: 15px;
}

Vue

new Vue({
  el: "#app",
  components: {
  	MyForm: {
    	template: '#MyForm',
      data: () => ({
      	selected: '',
				personType: '',
        CPF: '',
        CNPJ: ''
      }),
      methods: {
      	changeSelected (selected) {
        	this.selected = selected
        }
      }
    }
  }
})