Создание div в цикле vue for - PullRequest
Новая
       96

Создание div в цикле vue for

0 голосов
/ 12 июля 2020

Я бы хотел сделать v-for l oop для создания div. Я занимаюсь игрой в сапера, и вот мой код: 

<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' в v-for. Хочу разобраться с классами, атрибутами и т.д. c. потому что позже мне придется использовать 'classList' 'contains' et c.

Извините, может быть, я совершенно не прав и говорю чушь, но я начал с vue 3 недели go.

Вот выбранный мной метод, который я хочу использовать 

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

1 Ответ

0 голосов
/ 12 июля 2020

Вы хотите получить доступ к элементу div, но вы передаете объект в метод и запрашиваете classList в объекте (у которого его нет). Вместо этого вы должны запросить элемент.

Измените обработчик @click в вашем компоненте на: 

    @click="clicked"

и свой метод на: 

clicked(event) {

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