...
| Bloque de código | ||
|---|---|---|
| ||
<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.
...