LuisLlamas Logo
ES
manipulacion-dom-con-ref-vuejs

Manipulación directa del DOM con ref en Vue.js

  • 3 min
  • Avanzado

En Vue.js, podemos usar ref para hacer referencias a elementos del HTML manipular directamente el DOM cuando es necesario.

En general, en Vue.js vamos a generar un enfoque declarativo para construir el interfaz de usuario. Es decir, normalmente no tendremos que tocar directamente los elementos del DOM.

Sin embargo, hay ciertas ocasiones donde va a ser necesario acceder y manipular elementos del DOM directamente (bibliotecas de terceros, animaciones complejas, ciertos casos complicados, etc).

Para ello, Vue.js proporciona la utilidad ref, que nos permite obtener referencias a elementos del DOM o a instancias de componentes.

Evita manipular el DOM directamente cuando sea posible. Vue.js está diseñado para manejar la mayoría de las interacciones con el DOM de manera declarativa.

Qué es ref en Vue.js

En Vue.js, podemos usar ref para crear una referencia reactiva un objeto o un elemento del DOM (además de para valores reactivos, como vimos al hablar de reactividad).

Para crear una referencia a un elemento del DOM, primero importamos ref desde Vue y luego la usamos en la función setup.

Por otro lado, en el template, usamos la directiva ref para vincular un elemento del DOM a la referencia creada.

<template>
  <div ref="miElemento">Este es un elemento del DOM</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Crear una referencia
const miElemento = ref(null);

onMounted(() => {
  // Acceder al elemento del DOM después de que se monte
  console.log(miElemento.value); // <div>Este es un elemento del DOM</div>
});
</script>

En este ejemplo,

  • miElemento es una referencia al <div> en el template.
  • Después de que el componente se monte (onMounted),
  • podemos acceder al elemento del DOM a través de miElemento.value.

Ejemplos prácticos

Cambiar el contenido de un elemento

Supongamos que queremos cambiar el contenido de un elemento del DOM cuando el usuario hace clic en un botón.

<template>
  <div>
    <p ref="texto">Haz clic en el botón para cambiar este texto</p>
    <button @click="cambiarTexto">Cambiar texto</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const texto = ref(null);

function cambiarTexto() {
  texto.value.textContent = '¡El texto ha cambiado!';
}
</script>

En este ejemplo, el contenido del <p> se cambia directamente cuando el usuario hace clic en el botón.

Enfocar un campo de texto

Supongamos que queremos enfocar automáticamente un campo de texto cuando el componente se monta.

<template>
  <div>
    <input ref="campoTexto" type="text" placeholder="Escribe algo" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const campoTexto = ref(null);

onMounted(() => {
  campoTexto.value.focus();
});
</script>

En este ejemplo, el campo de texto se enfoca automáticamente cuando el componente se monta en el DOM.

Integrar con una biblioteca de terceros

Supongamos que queremos integrar una biblioteca de gráficos como Chart.js que requiere acceso directo a un elemento <canvas>.

<template>
  <div>
    <canvas ref="miCanvas"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Chart from 'chart.js/auto';

const miCanvas = ref(null);

onMounted(() => {
  const ctx = miCanvas.value.getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio'],
      datasets: [{
        label: 'Ventas',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
});
</script>

En este ejemplo, utilizamos ref para acceder a un elemento <canvas> y crear un gráfico con Chart.js.

En esta página