I have two nested v-for rendering for me a grid made out of n boxes (i.e 100 boxes). Every time the v-for render a box, it calls a function which should check if the x&y coordinates of the just created box are included in an array of randomly generated coordinates, if yes, it will push the reference to this DOM element into an array and/or it will manipulate the element somehow.

The problem is, that i can't find a way of targeting the rendered element, since there's no event to utilize for that purpose.

Code Example below:

<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>

data:

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')}
    });
};

I tried using the $event parameter to the function, but it didn't worked, clearly, because no event has been triggered (if I call the same function on a "@click" attribute, it works perfectly).

I also tried using refs and id's but I didn't managed to achieve my goal.

Also looking on the VueJs docs I haven't found any way of doing it

As you probably already understood, I'm trying to do a kind of "minefield" clone for learning purpose :)

Thanks to everyone!