使用v-for和HTML / JavaScript逻辑嵌套Vue组件？

Question

我有这个v-for循环：

<truchet-tile v-for="tile in tiles" v-bind:key="tile.id" :id="tile.id" :ttype="tile.ttype">
  </truchet-tile>

我想在每行行周围放置<div>标签，以使行不像现在那样是内联的：

我可以创建一个名为rowOfTiles的新Vue组件，并在其上循环，并为每行中的tile组件使用嵌套的v-for。

1. 是否可以使用HTML和JavaScript 不使用使用DOM方法将简单的嵌套循环逻辑应用于图块和图块行。像这样：

2. 如果是这样，那么在这样的情况下，是趋向于创建其他Vue组件还是趋向于寻找使用数据在“模型”端进行操作的更好方法？ （例如，创建新类的Vue组件性能如何昂贵？）

这是JSFiddle：https://jsfiddle.net/facechomp/hmLae5c8/6/

Answer 1

由于您具有一排图块的概念，因此数据中应该具有一排图块。然后，可以直接在模板中对其进行迭代。

您的初始化可以是

for (let y = 0; y < height; y++) {
  vm.tiles.push([]);
  for (let x = 0; x < width; x++) {
    // Vue tile component handles reactivity here:
    vm.tiles[y].push({
      id: id,
      ttype: Math.round(Math.random() * 6) // random tile
    });
    id++;
  }
}

您的模板将具有类似的内容

  <div v-for="row in tiles">
    <truchet-tile v-for="tile in row" v-bind:key="tile.id" :id="tile.id" :ttype="tile.ttype">
    </truchet-tile>
  </div>

Updated fiddle