【メモ】v-forを使ってコンポーネントをcardコンポーネントを複数生成するメモ

はじめに

こんにちは、がんがんです。

昨日くらいから息抜きでVue.js+Vuetifyを触っております。
ここ最近はReact.jsやNext.jsを触っていることが多いこともあり、息抜きで触っています。

実装をやっているときに、コンポーネントの複数生成はどうするんだろうということが気になって少し調べてみました。
今回はそのときのメモを残しておきます。

目次

コード

template

<template>
  <v-container class="display">
      <v-card
        max-width="300"
        tile
        v-for="(item, i) in items"
        :key="i"
        :class='"card" + (i+1)'
      >
        <v-card-title v-text="item.text"></v-card-title>
      </v-card>
  </v-container>
</template>

script

  export default {
    name: 'Tournament',

    data: () => ({
      item: 1,
      items: [
        { text: 'Team1'},
        { text: 'Team2'},
        { text: 'Team3'},
        { text: 'Team4'},
        { text: 'Team5'},
        { text: 'Team6'},
        { text: 'Team7'},
        { text: 'Team8'},
      ],
    }),
  }

実際の実行結果

Figmaでデザインを作成し、CSSで場所を整えています。
ただ、上手く理想通りの場所には配置されていないので、メインでいろいろとやる必要が出来たら直していきます。今回は遊びなのでセーフ(めんどいだけ)。

トーナメントっぽく配置してみた結果

おわりに

今回はVue.jsでコンポーネントを複数個作ってみました。
Figmaで作図したことについても後ほど記事をまとめてみます。