Tenho recebido muitas perguntas sobre esses dois caras no Vue js. Nesse artigo eu vou te explicar cada um deles como e quando utilizá-los.
Mas antes de a gente começar que tal assistir ao vídeo abaixo? Mas tudo bem se você prefere ler, sem ressentimentos 😄
Filtros no Vue js
Vamos começar pelo filtro que é o objeto filter . Filtros nada mais são do que uma forma de você formatar textos no seu template, ou seja, filtros vão realmente filtrar um texto em particular e vai retornar a alteração que você definiu dentro da função.
Filtros são utilizados em apenas dois cenários, o primeiro é dentro da interpolação do Vue.js {{ }} e o segundo é dentro das expressões de v-bind.
Vamos colocar isso no exemplo para ficar mais claro.
export default {
filters: {
capitalize(value) {
return `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
},
},
data() {
return {
msg: 'hello world',
};
},
};
Perceba que criamos um objeto filters e dentro dele colocamos a nossa função que nesse caso não faz muita coisa ahaha, mas faz o necessário para exemplificar. Aqui, dentro de filters, você pode colocar quantas funções você precisar ou seja, quantos filtros forem necessários.
Vamos então utilizar esse filtro.
<template>
{{ msg | capitalize }}
</template>
Perceba agora que utilizamos a variável msg que definimos lá no data. E a saída desse comando seria simplesmente Hello world.
Métodos no Vue js
Já métodos no Vue.js são também funções, mas que servem para lógica de negócio, como se fosse o cérebro do seu componente.
Uma forma de pensar é, métodos é o cérebro e cada função é uma rotina de pensamento. Ok..ok.. acho que complicou né? ahaha vamos nessa.
Um caso de uso real é que você provavelmente já precisou ou certamente ainda vai precisar fazer uma chamada ajax para sua API em busca de usuários. Isso mesmo, vamos supor que você quer listar todos os usuários do seu sistema na tela.
Com isso em mente, vamos criar uma função getUsers() dentro do objeto methods.
export default {
data() {
return {
users: [],
};
},
methods: {
getUsers() {
axios.get('users').then((response) => {
this.users = response.data;
})
},
},
};
getUsers() de qualquer lugar.
Porém, nós estamos fazendo a busca de lista de usuários e nada mais justo do que chamar esses caras o mais cedo possível. Por isso, vamos colocar dentro do created() hook.
export default {
data() {
return {
users: [],
};
},
created() {
this.getUsers();
},
methods: {
getUsers() {
axios.get('users').then((response) => {
this.users = response.data;
})
},
},
};
Então é isso aí, espero que tenho entendido a diferença entre filters e methods no Vue.js.
Valeuuu abs!
