Вложение компонентов Vue с логикой v-for против HTML / JavaScript? - PullRequest
Новая
       22

Вложение компонентов Vue с логикой v-for против HTML / JavaScript?

0 голосов
/ 18 декабря 2018

У меня есть цикл v-for: 

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

Я хочу поместить <div> теги вокруг каждой строки плиток, чтобы строки не были встроенными, как онитеперь: enter image description here

Я мог бы создать новый компонент Vue с именем rowOfTiles и выполнить цикл с вложенным v-for для компонентов плитки в каждой строке.

  1. Возможно ли вместо этого применить простую логику вложенного цикла к плиткам и строкам плиток, используя HTML и JavaScript без , используя методы DOM.Примерно так: JavaScript logic

  2. Если так, то в подобных ситуациях лучше практиковать тенденцию к созданию дополнительных компонентов Vue или к поиску путейчто-то делать на «модельной» стороне с данными?(Например, насколько дорого обходится создание новых классов компонентов Vue?)

Вот JSFiddle: https://jsfiddle.net/facechomp/hmLae5c8/6/

1 Ответ

0 голосов
/ 18 декабря 2018

Поскольку у вас есть концепция ряда плиток, в ваших данных должны быть строки плиток.Тогда это просто перебрать их в вашем шаблоне.

Ваша инициализация может быть 

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>

Обновленная скрипка

...