Accede a los elementos del DOM utilizando $refs

26194

Todo el tiempo necesitamos acceder a elementos del DOM utilizando JavaScript.

Vue.js nos permite hacerlo de una manera supremamente sencilla.

Las instancias de Vue.js cuentan con diversas propiedades, una de ellas es $refs.

Visto en código sería algo como:

app.$refs

vm.$refs

Donde “app” o “vm” representan la instancia misma de Vue(por convención se utiliza “app” o “vm” para nombrar a la instancia de Vue, pero puedes utilizar el nombre que desees, también puedes utilizar la palabra reservada “this” para referirte a la instancia. En éste ejemplo utilizaremos el nombre de la instancia, en cuyo caso es “app”) y $refs sería una propiedad propia de la instancia.

Ahora bien, ¿qué es examente “$refs”?

Es un objeto, dentro de él se van a almacenar todos los elementos del DOM que cuenten con el atributo “ref”. El atributo “ref” vendría a ser algo así como darle una ID al elemento.

<input ref="entrada"></input>

Podemos tener todos los elementos que deseemos con el atributo “ref”, siempre y cuando el valor del atributo sea diferente para cada elemento.

<input ref="entrada"></input>
<input ref="entrada2"></input>

Para acceder al objeto que almacena estos elementos bastaría con llamarlo de la siguiente manera:

app.$refs

Y para acceder al elemento dentro del objeto:

app.$refs.entrada

Vamos a aplicar lo anterior con una aplicación sencilla

Lo que hace la aplicación es añadir a un párrafo el texto que escribamos en una entrada:

Lo primero es crear el HTML y la instancia de Vue.
HTML:

<divid="app"><h1>Accediendo a Elementos del DOM utilizando vm.$refs</h1><h2>Añade texto a la página</h2><inputtype="text"><br><br><buttontype="button">Guardar</button><buttontype="button">Borrar</button><p></p></div>

Instancia de Vue:

let app = new Vue({
	el : '#app'
})

Muy bien, hasta este punto tenemos un div con ID “app” y una instancia de Vue apuntando a ese div.

Vamos colocarle los atributos “ref” a los elementos cuyas propiedades queremos acceder, que en este caso son el input y el párrafo.

<div id="app">
	<h1>Accediendo a Elementos del DOM utilizando vm.$refs</h1>
	<h2>Añade texto a la página</h2>
	<input type="text"ref="text">
	<br>
	<br>
	<button type="button">Guardar</button>
	<button type="button">Borrar</button>
	<p ref="textField"></p>
</div>

Ahora vamos a escribir los métodos addText() y deleteText() de los botones en la instancia de Vue.

let app = new Vue({
	el : '#app',
	methods : {
		addText () {
			const text = app.$refs.text.value
			const textField = app.$refs.textField
			textField.innerHTML = textField.innerHTML + '<br />' + text
		},
		deleteText () {
			const textField = app.$refs.textField
			textField.innerHTML = ''
		}
	}
})

Y por último ponemos los botones a la escucha de los métodos.

<div id="app">
	<h1>Accediendo a Elementos del DOM utilizando vm.$refs</h1>
	<h2>Añade texto a la página</h2>
	<input type="text"ref="text">
	<br>
	<br>
	<button type="button" @click="addText">Guardar</button>
	<button type="button" @click="deleteText">Borrar</button>
	<p ref="textField"></p>
</div>