nuxt_index.vue

<template>
    <div class="a-container" :class="{ 'is-loaded' : isLoaded }">
        <input type="radio" v-for="(project, k) in projects" :key="project.id" class="a-slide__label" :id="'slide'+(k+1)" :name="'slide'+k" :value="project.id" v-model="current" />

        <main class="l-main">       
            <article v-for="project in projects" :key="project.id" class="m-article" :id="'project'+project.id">
                <figure class="m-media"><img :src="project.src" /></figure>
                <h2 class="m-ttl">{{ project.title }}</h2>
                <dl class="m-list--dl">
                    <div class="m-list__item">
                        <dt>リリース/作成時期：</dt>
                        <dd>{{ project.release }}</dd>
                    </div>
                    <div class="m-list__item">
                        <dt>担当など詳細：</dt>
                        <dd>{{ project.more }}</dd>
                    </div>
                </dl>
            </article>
        </main>
        
        <nav class="l-nav">
            <div class="a-slide__prev-next">
                <label v-for="(project, k) in projects" :key="project.id" class="a-slide__btn" :for="'slide'+(k+1)" />
            </div>
        </nav>
    </div>
</template>

<script>
export default {
  data() {
    return {
        isLoaded: true,
        current: '200706',
        projects: [
            {
            id: 200706,
            title: "タイトルイチ",
            src: require("assets/img/200709_sample.jpg"),
            release: "2007年9月",
            more: "ダミーテキストイチ"
            },
            {
            id: 200803,
            title: "タイトルニ",
            src: require("assets/img/200803_sample.png"),
            release: "2008年3月",
            more: "ダミーテキスト二"
            },
            {
            id: 200805,
            title: "タイトルサン",
            src: require("assets/img/200805_sample.png"),
            release: "2008年6月",
            more: "ダミーテキストサン"
            }
        ]
    };
  }
};
</script>