Creating div in vue for loop

Question

I'd like to do v-for loop for creating a div. I'm doing a minesweeper game and here is my code :

<div class="grid">
    <div class="square"
    v-for="(square, index) in squares"
    :id="index"
    :key="index"
    :class="squares[index]"
    @click="clicked(square, index)"
    >
    </div>
</div>

'Squares' in this code is an array with shuffled classes 'bomb' or 'empty'. I know that it's wrong because after I click on random square I get only this class from te 'squares' array. What should be there instead of this 'squares' array in v-for. I want to get whole with classes, attributes etc. because later I have to use 'classList' 'contains' etc.

Sorry, maybe I'm completly wrong and talking bullshit, but I started with vue 3 weeks ago.

Here is the method clicked which I want to use

clicked(square) {
        
    if(this.isGameOver) return;
    if(square.classList.contains('chechked') || square.classList.contains('flag')) return
    if(square.classList.contains('bomb')) {
        this.gameOver(square);
    } else {
        let total = square.getAttribute('data');

        if(total != 0) {
            square.classList.add('checked');
            square.innerHTML = total;
            return
        }
    }
    square.classList.add('checked');
}

Answer 1

You want to access the div element but you are passing the object in the method and you are asking for classList into the object (that does not have it). You should query the element instead.

Change the @click handler in your component to:

    @click="clicked"

and your method to:

clicked(event) {

        let square = event.target;
        console.log(square);
        console.log(square.classList);
        ...