vue 프로젝트 시작! --views폴더(NoticeView.vue)

<template>
  <div id="notice_wrap">
    <div class="notice" v-if="show_title">
      <ul class="notice list">
        <li :key='notice' v-for="notice in notices">
          <div @click="show_contents(`${notice.idx}`)">
            <p class="title">{{ notice.title }}</p>
            <p class="regdate">{{ notice.regdate.split(' ')[0] }}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="info" v-else>
      <button @click="back_notice()">뒤로가기</button>
      <info-view v-bind:pdata="notice_idx"></info-view>
    </div>
  </div>
</template>

<script>
import { getNotice } from '../../api/api.js';
import InfoView from './InfoView.vue';

export default {
  data() {
    return {
      notices: [],
      show_title: true,
      notice_idx: '',
    }
  },
  created() {
    getNotice()
      .then(response =>
        this.notices = response.data);
  },
  methods: {
    show_contents(idx) {
      this.notice_idx = idx;
      this.show_title = false;
    },
    back_notice() {
      this.show_title = true;
    }
  },
  components: {
    InfoView
  }
}
</script>

<style>
#notice_wrap {
  margin: 15px 0 0 15px;
}

.tag {
  width: 50px;
  height: 20px;
}

.notice.list li {
  list-style: none;
}

.notice.list li div {
  width: 640px;
  height: 60px;
  background-color: white;
  color: black;
  margin-bottom: 8px;
}

.notice.list li div .title {
  padding-top: 3px;
  padding-left: 25px;
  display: inline-block;
}

.notice.list li div .regdate {
  padding-top: 3px;
  padding-right: 25px;
  float: right;
  display: inline;
}


router-link {
  text-decoration: none;
}

ul {
  margin: 0 auto;
  padding: 0;
}
</style>