在 vue for 循环中创建 div

Question

我想使用 v-for 循环来创建 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' 是 class 和 'bomb' 或 'empty' 打乱的数组。我知道这是错误的，因为在我点击随机方块后，我只从 te 'squares' 数组中得到这个 class。在 v-for 中应该有什么而不是这个 'squares' 数组。我想用 class es，属性等来整体，因为以后我必须使用 'classList' 'contains' 等

抱歉，也许我完全错了，在胡说八道，但我是 3 周前开始使用 vue 的。

这是我想使用的点击方法

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

您想访问 div 元素，但您在方法中传递了对象，并且要求将 classList 放入对象（没有它）。您应该改为查询元素。

将组件中的@click 处理程序更改为：

    @click="clicked"

以及您的方法：

clicked(event) {

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

在 vue for 循环中创建 div

Creating div in vue for loop

minesweeper

vue.js

v-for