Manipulando elementos HTML com refs no Vue.js
O parâmetro refs no Vue.js permite acessar e manipular diretamente elementos HTML definidos no template. Essa funcionalidade possibilita, por exemplo, modificar estilos, texto e outras propriedades desses elementos. Veja um exemplo de página HTML que utiliza essa abordagem:
<!DOCTYPE html>
<html>
<head>
<title>$refs no Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<h2 ref="header">Hello world!</h2>
<button v-on:click="change">Change</button>
</div>
<script>
Vue.createApp({
methods: {
change() {
this.$refs.header.innerText = "Welcome to Vue.js";
this.$refs.header.style.color = "red";
},
},
}).mount("#app");
</script>
</body>
</html>Nesse exemplo, o atributo ref define uma referência para o elemento HTML, permitindo que ele seja acessado diretamente no código usando o objeto $refs.
O elemento <h2> no template é marcado com a referência header:
<h2 ref="header">Hello world!</h2>Nos métodos definidos no componente Vue, o elemento pode ser acessado por meio de this.$refs, utilizando a chave configurada no atributo ref:
O objeto retornado pelo $refs representa o elemento HTML referenciado. Ele pode ser manipulado como qualquer outro objeto JavaScript correspondente a um elemento HTML, permitindo o acesso a propriedades como innerText ou innerHTML. Embora this.$refs.header seja tecnicamente uma camada adicional sobre o objeto JavaScript nativo do elemento, isso não limita a interação ou manipulação direta.
No exemplo, o método change altera o texto e a cor do elemento h2. Antes da alteração:
Depois da alteração:
Outras propriedades e atributos do elemento HTML podem ser acessados e modificados da mesma forma, proporcionando flexibilidade para trabalhar com elementos diretamente na página.
Documentação oficial: