6. projeto [vuejs-04]: diretrizes [v-model, v-bind], atributos calculados, formulário de entrada

A estrutura do projeto [vuejs-04] é a seguinte:

6.1. O script principal [main.js]

É o mesmo do exemplo anterior.

6.2. O componente principal [App]

O código de [App.vue] é o seguinte:


<template>
  <b-container>
    <b-card>
      <!-- mensagem de apresentação -->
      <b-row>
        <b-col cols="8">
          <b-alert show variant="success" align="center">
            <h4>[vuejs-04] : directives [v-model, v-bind], attributs calculés, formulaire de saisie</h4>
          </b-alert>
        </b-col>
      </b-row>
      <Form />
    </b-card>
  </b-container>
</template>


<script>
  import Form from "./components/Form.vue";

  export default {
    name: "app",
    components: {
      Form
    }
  };
</script>

O componente [App.vue] utiliza o novo componente [Form] (linhas 12, 19, 24).

6.3. O componente [Form]

O código do componente [Form] é o seguinte:


<template>
  <div>
    <!-- formulário -->
    <b-form>
      <!-- elementos do formulário -->
      <b-row>
        <b-col cols="4">
          <b-card bg-variant="light">
            <b-form-group label="Nombre d'enfants à charge" label-for="enfants">
              <b-input type="text"
                       id="enfants"
                       placeholder="Indiquez votre nombre d'enfants"
                       v-model="enfants"
                       v-bind:state="enfantsValide" />
              <b-form-invalid-feedback :state="enfantsValide">Vous devez saisir un nombre positif ou nul</b-form-invalid-feedback>
            </b-form-group>
            <!-- botão -->
            <b-button variant="primary" :disabled="formInvalide" @click="doSomething">Valider</b-button>
          </b-card>
        </b-col>
      </b-row>
    </b-form>
    <b-row class="mt-3">
      <b-col cols="4">
        <b-alert show variant="warning" align="center">
          <h4>enfants= {{enfants}}</h4>
        </b-alert>
      </b-col>
    </b-row>
  </div>
</template>

<!-- script -->
<script>
  export default {
    // nome
    name: "Form",
    // atributos estáticos do componente
    data() {
      return {
        // número de filhos
        enfants: ""
      };
    },

    // atributos calculados
    computed: {
      // atributo [formInvalide]
      formInvalide() {
        return !this.enfantsValide;
      },
      // atributo [enfantsInvalide]
      enfantsValide() {
        return Boolean(this.enfants.match(/^\s*\d+\s*$/));
      }
    },
    // métodos
    methods: {
      doSomething() {
        // o número de filhos é conhecido no momento da validação
        alert("Nombre d'enfants : " + this.enfants);
      }
    }
  };
</script>

Exibição visual

Comentários

linhas 4-32: a tag <b-form> insere um formulário Bootstrap;
linha 6: a tag <b-row> insere uma linha no formulário;
linha 7: a tag <b-col cols=’4’> insere uma coluna que ocupa 4 colunas do Bootstrap;
linha 8: a tag <b-card> [6] insere um cartão Bootstrap, uma área delimitada por uma borda;
linha 9: a tag <b-form-group> insere um grupo de elementos do formulário interligados entre si. Aqui, um texto (atributo [label]) [1] está vinculado a um campo de entrada (atributo [label-for]). O valor de [label-for] é o valor do campo [id], linha 12, do campo de entrada;
linhas 10-14: a tag <b-input> [2] insere um campo de entrada:
- linha 10: [type=’text’] indica que é possível digitar texto no campo de entrada. Poderíamos ter escrito [type=’number’] com restrições [min=’val1’ max=’val2’ step=’val3’], já que esperamos um número de filhos. Colocamos [type=’text’] para mostrar como verificar a validade de uma entrada;
- linha 12: o atributo [placeholder] [3] define a mensagem exibida na área de entrada enquanto o usuário não tiver digitado nada;
- linha 13: a diretiva [v-model] associa, de forma bidirecional, o valor inserido ao atributo [enfants], linha 42, do componente:
  - quando o valor digitado muda, o valor do atributo [enfants] também muda;
  - quando o valor do atributo [enfants] muda, o valor inserido também muda, ou seja, o conteúdo de [2] muda;
  - o ponto importante a ser compreendido é que, graças ao mecanismo anterior, quando o usuário clica no botão [Valider] [5], o atributo [enfants] da linha 42 passa a ter como valor o valor inserido em [2];
- linha 14: a diretiva [v-bind] estabelece uma ligação entre, de um lado, um atributo da tag <b-input>, neste caso o atributo [state], e, de outro, um atributo do componente, neste caso [enfantsValide], na linha 53. O atributo [enfantsValide] é especial no sentido de que é uma função que retorna o valor do atributo. Esse tipo de atributo é chamado de atributo calculado. Os atributos calculados encontram-se na propriedade [computed], linha 47, do componente. Os atributos calculados são utilizados da mesma forma que os atributos estáticos da função [data]: na linha 14, não se escreve [v-bind:state=’enfantsValide()’], mas sim [v-bind:state=’enfantsValide’], sem os parênteses. Além disso, ao ler o [template], não é possível distinguir um atributo calculado de um atributo estático. Para isso, é necessário examinar o código do script do componente;
- linha 14: o atributo [state] determinará o estado válido/inválido do valor inserido: se [enfantsValide] retornar o valor [true], o valor inserido é considerado válido; caso contrário, é considerado inválido. A captura de tela acima mostra o componente [b-input] quando a função [enfantsValide] retorna o valor [false];
- linha 15: a tag <b-form-invalid-feedback> [4] permite exibir uma mensagem quando a entrada em [2] é inválida. Seu atributo [:state=’enfantsValide’] é idêntico ao atributo [v-bind:state=’enfantsValide’] da linha 14. É possível omitir a diretiva [v-bind], mas é necessário manter o sinal [:]. A mensagem de erro é exibida, portanto, quando o atributo [enfantsValide] tem o valor [false];
- linha 16: fim do grupo de elementos <b-group>;
- linha 18: o botão [5] que permitirá confirmar a entrada:
  - ele ficará azul [variant=’primary’];
  - [:disabled="formInvalide"]: o atributo [disabled] permite ativar/desativar o botão. Esse atributo está vinculado (v-bind) ao atributo calculado [formInvalide] da linha 49;
  - [@click="doSomething"]: quando o usuário clicar no botão, o método [doSomething], linha 59, será executado;
- linhas 19-22: fechamento das diversas tags abertas;
- linhas 23-29: uma nova linha no [template]. [class=’mt-3’] significa [margin (m) top (t) égale à 3 spacers]. [spacer] é uma medida de espaçamento do Bootstrap. Essa classe gera o espaçamento [8] na captura de tela acima. Sem essa classe, a área [7] fica colada à área [1-6];
- linha 24: uma coluna que ocupa 4 colunas do Bootstrap;
- linhas 25-27: um alerta [warning] exibindo o valor do atributo estático [enfants] (linha 42). Como esse atributo possui uma ligação bidirecional com o campo de entrada, assim que o usuário o altera, o valor exibido no alerta também muda;
- linhas 34-65: o código jS do componente;
- linha 42: o único atributo estático do componente;
- linhas 47-56: os atributos calculados do componente;
- linhas 53-55: a entrada é considerada válida se for um número inteiro positivo, eventualmente precedido ou seguido por “espaços”;
- linhas 49-51: o formulário é considerado válido se a entrada do número de filhos for válida. Em geral, um formulário possui várias entradas e é considerado válido se todas elas forem válidas;
- linhas 58-63: os métodos do componente que respondem aos eventos dele. Aqui, há apenas um evento: o [click] no botão. Limita-se a exibir o valor inserido para mostrar que se tem acesso a ele;

6.4. Execução do projeto

Alteramos o arquivo [package.json] e executamos o projeto: