b-table list 화면에서 상세화면 넘어가기 (parameter 넘기기)

 

column에 goDetail을추가

 

list.vue

<b-table
        class="w-100 mx-auto"
        :striped="false"
        :bordered="true"
        :small="true"
        :hover="true"
        :items="items"
        :fields="fields"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        :busy="isBusy"
        :filter="filter"
        :borderless="false"
        :outlined="false"
        :dark="false"
        :fixed="false"
        :no-border-collapse="noCollapse"
        @filtered="onFiltered"
        :head-variant="headVariant"
        :table-variant="tableVariant"
        :current-page="currentPage"
        :per-page="perPage"
      >
      
      <template #cell(go_detail)="data" >
          <router-link :to="{ name: 'submission-detail', params: {id: data.item.submission_id, email: data.item.email}}">
          <b-icon style="cursor: pointer;" icon="arrow-right-square" variant="primary"></b-icon>
          </router-link>
          <!--
          <b-button size="sm" @click="info(row.item, row.index, $event.target)" class="mr-1">
            Info modal
          </b-button>
          -->
        </template>
        
       </b-table>

 

detail.vue

  async mounted() {

//this.$route.params $route를 이용해서 데이터를 뽑아냄
      let params =
          "?id=" + this.$route.params.id +
          "&email=" + this.$route.params.email;

		....
}

 

 

router.js

...   
   
   {
      path: '/raw/detail',
      name: 'submission-detail',
      component: SubmissionDetail,
      props: true
    },
    
 ...

 

 

 

 

*** row 클릭 시 넘어가게 적용하기 ***

1. 클릭 시 발생하는 이벤트 추가 (html)

<b-table
        class="w-100 mx-auto"
        :striped="false"
        :bordered="true"
        :small="true"
        :hover="true"
        :items="items"
        :fields="fields"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        :busy="isBusy"
        :filter="filter"
        :borderless="false"
        :outlined="false"
        :dark="false"
        :fixed="false"
        :no-border-collapse="noCollapse"
        @filtered="onFiltered"
        :head-variant="headVariant"
        :table-variant="tableVariant"
        :current-page="currentPage"
        :per-page="perPage"
        @row-clicked="goDetail">
        
</b-table>

2. b-table 옵션에 row-clicked 이벤트 걸어주기(script)

  ...
  methods: {

    goDetail( item ) {
      this.$router.push({ name: 'submission-detail', params: {id: item.submission_id, email: item.email}});
    },
    
    
    ...
}