array-refs.md

title	v-for Array Refs
badges	breaking

{{ $frontmatter.title }}

En Vue 2, cuando se utiliza el atributo ref dentro de v-for, la propiedad correspondiente $refs será llenado con una matriz de refs. Este comportamiento se vuelve ambiguo y ineficiente cuando hay v-for anidados.

En Vue 3, dicho uso no creará automáticamente una matriz en $refs. Para recuperar múltiples refs de una sola vinculación de dato, vincula la ref a una función que provea más flexibilidad (esta es una nueva característica):

<div v-for="item in list" :ref="setItemRef"></div>

Con la API de opciones:

export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    console.log(this.itemRefs)
  }
}

Con la API de composición:

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}

Note que:

• itemRefs no es necesario ser una matriz: puede también ser un objeto dónde las refs son establecidas mediante sus claves de iteración.

• Este también permite que itemRefs sea reactivo y observado, si es necesario.

Estrategia de Migración

Indicadores de compilación de migración:

• V_FOR_REF
• COMPILER_V_FOR_REF