vue.js - 使用 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>瓷砖周围放置标签，这样这些行就不会像现在这样内联：

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

1. 相反，是否可以在不使用 DOM 方法的情况下，使用 HTML 和 JavaScript 将简单的嵌套循环逻辑应用于瓦片和瓦片行。像这样的东西：

2. 如果是这样，在这样的情况下，是倾向于创建额外的 Vue 组件还是倾向于寻找在“模型”方面用数据做事的方法更好？（例如，创建新的 Vue 组件类的性能成本有多大？）

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

标签： vue.jsvue-componentreactive-programming

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>

更新的小提琴