Tengo dos v anidadas para representarme una cuadrícula hecha de n cajas (es decir, 100 cajas). Cada vez que v-for representa un cuadro, llama a una función que debe verificar si las coordenadas x&y del cuadro recién creado están incluidas en una matriz de coordenadas generadas aleatoriamente; en caso afirmativo, empujará la referencia a este elemento DOM a un array y/o manipulará el elemento de alguna manera.

El problema es que no puedo encontrar una forma de apuntar al elemento renderizado, ya que no hay ningún evento para utilizar para ese propósito.

Ejemplo de código a continuación:

 <div v-for="x in 10" class=row"> <div v-for="y in 10" class="box" :data-x="x" :data-y="y"> {{generateDOMB(x, y)}} </div> </div>

datos:

 randomCoordinates = [ { x: 8, y: 5 }, { x: 4, y: 2 }, { x: 5, y: 7 }, ]; DOMelements = [];

js:

 function generateDOMB(x, y) { randomCoordinates.forEach(coordinate => { if (x == coordinate.x && y == coordinate.y) { DOMelements.push('THE DOM ELEMENT')} }); };

Intenté usar el parámetro $event para la función, pero claramente no funcionó porque no se activó ningún evento (si llamo a la misma función en un atributo "@click", funciona perfectamente).

También intenté usar refs e id, pero no logré lograr mi objetivo.

También buscando en los documentos de VueJs no he encontrado ninguna forma de hacerlo.

Como probablemente ya entendiste, estoy tratando de hacer una especie de clon de "campo minado" con fines de aprendizaje :)

¡Gracias a todos!