FinderBoard.vue

<template>
  <v-container fill-height fluid grid-list-xl>
    <v-layout justify-center wrap>
      <v-dialog
        v-model="loginDialog"
        persistent
        max-width="290"
      >
        <v-card>
          <v-card-title class="headline">불러오기 실패</v-card-title>

          <v-card-text>
            로그인이 필요한 기능입니다.
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="green darken-1"
              text
              @click="moveLogin"
            >
              로그인 이동
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <v-flex d-flex justify-start xs12 sm20>
        <v-btn class="ma-2" outlined color="cyan" @click="onClicked()"><v-icon left>mdi-lead-pencil</v-icon>글쓰기</v-btn>
        <v-spacer></v-spacer>
        <v-spacer></v-spacer>
        <v-spacer></v-spacer>
        <v-spacer></v-spacer>
        <v-spacer></v-spacer>
        <v-text-field xs12 md4 outlined label="검색" v-model="search" prepend-inner-icon="mdi-magnify" single-line hide-details clearable></v-text-field>
      </v-flex>
      <v-flex md12>
        <material-card color="green" title="발견 게시판" text="제목을 클릭하여 게시글을 확인하세요.">
          <v-data-table
            :headers="headers" 
            :items="items" 
            item-key="_id"
            loading-text="Loading..."
            :items-per-page="5"
            class="elevation-1"
            :search="search">
            <template slot="headerCell" slot-scope="{ header }">
              <span class="subheading font-weight-light text-success text--darken-3" v-text="header.text"/>
            </template>
            <template slot="items" slot-scope="{item}" v-if="items">
              <td class="text-xs-center">
                <img v-bind:src="item.image" id="image" width="100px" height="100px" />
              </td>
              <td class="text-xs-center"> 
                <v-btn 
                  color="success"
                  small
                  @click="showPost(item._id)" 
                  value="item.title" 
                  >
                  <strong class="title right">{{item.title}}</strong>
                </v-btn>
              </td>
              <td class="text-xs-right">
                <strong class="title right">{{item.writer}}</strong>
              </td>
              <td class="text-xs-right">
                <strong class="title right">{{ item.created }}</strong>
              </td>
            </template>
          </v-data-table>
        </material-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    headers: [
      { text: '사진', value: 'img', sortable: false, filterable: false, align: 'center'},
      { text: '제목', value: 'title', sortable: false, align: 'center'},
      { text: '작성자', value: 'writer', sortable: false, align: 'right'},
      { text: '작성날짜', value: 'created', sortable: false, align: 'right'}
    ],
    items: [],
    search: '',
    loginDialog: false,
    image:null
    
  }),
  created() {
    var log;
    this.$http.get('/finderboard')
      .then( (response) => {
        log = response.data.message;

        if(log == "required login"){
          this.loginDialog = true;
        }
        else{
          this.items = response.data.finderboards;
          for(let i=0; i<this.items.length; i++){
            var base64data=Buffer.from(this.items[i].image.data.data,'binary').toString('base64');
            this.items[i].image='data:image/jpeg;base64,'+base64data;
          }
        }
      }).catch(err => {
          alert("ERR while FET losterboard" + err)
        });
  },
  methods: {
    onClicked: function(){
      this.$router.push('/writefindpost')
    },
    showPost: function(item_id){
      this.$router.push({
        path:`/showfindpost/${item_id}`
      })
    },
    moveLogin: function(){
      this.loginDialog = false;
      this.$router.push(`login`);
    }
  }
}
</script>