Vue.js Validando propriedades

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>

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.

É 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.