# Lógica primitiva

{% hint style="info" %}
Os exemplos são meramente ilustrativos e tentam reproduzir o que nossa experiência em contato com outros desenvolvedores tem demonstrado.
{% endhint %}

## A abordagem tradicional

Imagine que sua aplicação deve alternar a visibilidade do campo de *CPF* e *CNPJ* com base no campo *Tipo de Pessoa* que pode ser *Pessoa Física* ou *Pessoa Jurídica*. Em uma abordagem tradicional usando tecnologia web teríamos algo parecido com os trechos à seguir.

No HTML:

{% code title="index.html" %}

```markup
<div>
  <div>Tipo de Pessoa</div>
  <label>
    <small>Pessoa Física</small>
    <input
      name="personType"
      type="radio"
      value="pessoa-fisica"
      onchange="changePersonType('pessoa-fisica')"
    >
  </label>
  <label>
    <small>Pessoa Jurídica</small>
    <input
      name="personType"
      type="radio"
      value="pessoa-juridica"
      onchange="changePersonType('pessoa-juridica')"
    >
  </label>
</div>
<div>
  <div>Documento</div>
  <label id="CPF">
    <small>CPF</small> <input name="CPF">
  </label>
  <label id="CNPJ">
    <small>CNPJ</small> <input name="CNPJ">
  </label>
</div>
```

{% endcode %}

Já no Javascript teríamos algo como:

{% code title="script.js" %}

```javascript
window.onload = function() {
  const cpf = document.querySelector('#CPF')
  const cnpj = document.querySelector('#CNPJ')

  cpf.style.display = 'none'
  cnpj.style.display = 'none'

  function changePersonType (personType) {
    cpf.style.display = 'none'
    cnpj.style.display = 'none'

    if (personType === 'pessoa-fisica') {
      cpf.style.display = ''
    }
    if (personType === 'pessoa-juridica') {
      cnpj.style.display = ''
    }
  }
}
```

{% endcode %}

Para ter um resultado semelhante à:

![Exemplo disponível em https://jsfiddle.net/wilcorrea/oaf3gedr](https://1325336062-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Le_gxA3OrOI_wsDK0SN%2F-Let3Msp1XH_Piv-MAm2%2F-Let9tMSWO2LyjsX_TZa%2Fimage.png?alt=media\&token=13edd17d-acb7-4695-a6de-606220b2db40)

Como podemos ver acima, há separação entre a apresentação (o HTML) e os comportamentos (o Javascript) na abordagem tradicional quando é feita dessa forma. Seria possível reusar o arquivo `script.js` desde que o novo `index.html` se comprometesse à manter uma estrutura parecida com a desta primeira versão.

## Como os componentes Vue têm sido construídos

Ao migrar o exemplo anterior para componentes não é incomum termos algo parecido com o que será mostrado à seguir.

{% code title="MyForm.vue" %}

```markup
<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>

<script>
export default {
  data: () => ({
      selected: '',
    personType: '',
    CPF: '',
    CNPJ: ''
  }),
  methods: {
    changeSelected (selected) {
      this.selected = selected
    }
  }
}
</script>
```

{% endcode %}

Exemplo disponível [aqui](https://jsfiddle.net/wilcorrea/eupyzak2).

Esta "conversão" tem um inconveniente, o componente passa a ser responsável pela lógica primitiva e pela regra de negócio de definir qual campo será visível.
