Validando propriedades no Vue.js

O props permite passar dados externos para um componente. No entanto, nem sempre os valores recebidos são válidos. Por exemplo, um número negativo pode ser atribuído à idade ou um nome pode ser deixado em branco. Para evitar esse tipo de inconsistência, é possível definir regras de validação.

O primeiro nível de validação pode ser feito definindo o tipo esperado para cada propriedade. Os tipos suportados incluem String, Number, Boolean, Function, Object, Array, Symbol e Date.

Os props podem ser definidos de duas maneiras.

A primeira maneira é definir uma lista simples:

app.component("user", {
  props: ["name", "age"],
  template: "<div><h2>User</h2><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>",
});

No entanto, props pode ser um objeto, permitindo uma definição mais detalhada:

app.component("user", {
  props: { name: String, age: Number },
  template: "<div><h2>User</h2><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>",
});

Neste caso, name e age são propriedades dentro do objeto props, e cada uma tem um tipo definido. Se um valor incompatível for passado, o Vue gera um aviso no console informando o erro.

O código abaixo demonstra essa validação em funcionamento:

<!DOCTYPE html>
<html>
  <head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="name" /><br /><br />
      <input type="number" v-model.number="age" /><br /><br />
      <user :name="name" :age="age"></user>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return { name: "", age: 18 };
        },
      });

      app.component("user", {
        props: { name: String, age: Number },
        template: "<div><h2>User</h2><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>",
      });

      app.mount("#app");
    </script>
  </body>
</html>

Tipos de propriedades em Vue.js

Validação avançada

Para um controle mais rigoroso, é possível definir parâmetros adicionais:

type: especifica o tipo de dado esperado.
required: determina se a prop é obrigatória (true ou false).
default: define um valor padrão quando nenhum valor é passado.
validator: função que valida o valor da prop. Se retornar true, o valor é aceito; se retornar false, o Vue exibe um aviso.

No exemplo abaixo, essas validações são aplicadas:

<!DOCTYPE html>
<html>
  <head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="name" /><br /><br />
      <input type="number" v-model.number="age" /><br /><br />
      <user :name="name" :age="age"></user>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return { name: "", age: 18 };
        },
      });

      app.component("user", {
        props: {
          name: {
            type: String,
            required: true,
            default: "Tom",
            validator: function (value) {
              return value !== "admin" && value !== "";
            },
          },
          age: {
            type: Number,
            required: true,
            default: 18,
            validator: function (value) {
              return value >= 0 && value < 100;
            },
          },
        },
        template: "<div><h2>User</h2><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>",
      });

      app.mount("#app");
    </script>
  </body>
</html>

Neste caso:

name é obrigatório e recebe 'Tom' como valor padrão. A validação impede que 'admin' ou uma string vazia sejam utilizados.
age é obrigatório e recebe 18 como padrão. A validação restringe o valor ao intervalo entre 0 e 99.

Validando propriedades em Vue.js

ℹ️ É importante observar que a validação ocorre antes da criação do objeto do componente. Isso significa que propriedades definidas dentro de data(), computed ou methods não estão disponíveis dentro das funções default e validator.