Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

...

Bloque de código
languagejs
<template>
  <ul>
    <li v-for="item in items" :key="item.id" :ref="setNode">
      ...
    </li>
  </ul>
</template>

// later

...
data() {
  return {
    myNodes: [] // createCreamos anun array to hold the nodes para guardar los nodos de los ref
  }
},
beforeUpdate() {
  this.myNodes = [] // reset empty before each update Antes de cada actualización del DOM reseteamos el array
},
methods: {
  setNode(el) { // thisSe will be called automaticallyejecutará automáticamente
    this.myNodes.push(el) // addAñadimos theel node
nodo al }
},
updated() {
  console.log(this.myNodes) // finally, a list of HTML node references array
  }
},

Aquí, cada vez que se actualiza el DOM, se resetea el array myNodes que se ha definido en el data(), y se ejecuta setNode para asignar cada uno de los elementos del v-for. De esta forma, this.myNodes sustituiría a this.$refs.myNodes.

...