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

はじめに

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


昨日くらいから息抜きでVue.js+Vuetifyを触っております。
ここ最近はReact.jsNext.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で場所を整えています。
ただ、上手く理想通りの場所には配置されていないので、メインでいろいろとやる必要が出来たら直していきます。今回は遊びなのでセーフ(めんどいだけ)。

f:id:gangannikki:20200415185506j:plain
トーナメントっぽく配置してみた結果

おわりに

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