테이블의 행을 URL에 연결하기

Question

vue-tables-2을 구현하는 vue 구성 요소를 작업 중입니다. 나는 작동 예제 here을 가지고있다. 내가 뭘 하려는지 편집 셀에 반대하는 전체 행에 편집 href url을 연결하는 것입니다. 바닐라 자바 ​​스크립트를 사용하여 mounted 후크 (this.$el)를 사용하여 가상 돔에 액세스하고 href에서 행을 감싸고 편집 열을 숨기려고 시도했지만 해킹 비트처럼 느껴집니다. 이 작업을 수행하는 방법에 대한 제안 사항은 무엇입니까?

<template> 
    <div class="col-md-8 col-md-offset-2"> 
     <div id="people"> 
      <v-client-table :data="tableData" :columns="columns"> 
       <template slot="edit" slot-scope="props"> 
        <div> 
         <a class="fa fa-edit" :href="edit(props.row.id)">thing</a> 
        </div> 
       </template> 
      </v-client-table> 
     </div> 
    </div> 
</template> 

<script> 
    import {ServerTable, ClientTable, Event} from 'vue-tables-2'; 
    import Vue from 'vue'; 
    import axios from 'axios'; 

    export default { 
     methods: { 
      edit: function(id){ 
         return "edit/hello-" + id 
      } 
     }, 
     data() { 
      return { 
       columns: ['edit', 'id','name','age'], 
       tableData: [ 
        {id:1, name:"John",age:"20"}, 
        {id:2, name:"Jane",age:"24"}, 
        {id:3, name:"Susan",age:"16"}, 
        {id:4, name:"Chris",age:"55"}, 
        {id:5, name:"Dan",age:"40"} 
       ] 
      }; 
     } 
    } 
</script> 

Answer 1

당신이들을 수있는 테이블 구성 요소 emits a row-click event. 그것은 당신에게 클릭 된 행을 제공합니다. 링크를 사용하는 대신 이벤트를 수신하고 원하는 위치로 이동하는 것이 좋습니다.

다음은 업데이트 된 템플릿입니다.

<v-client-table :data="tableData" :columns="columns" @row-click="onRowClick"> 

그리고 방법에

:

onRowClick(event){ 
    window.location.href = `/edit/hello-${event.row.id}` 
} 

Example.