I have been working on a vue component that utilizes vue-tables-2. You can find the functioning example here. My goal is to link the edit href url to the entire row rather than just the edit cell. I attempted to achieve this using vanilla javascript by accessing the virtual dom through the mounted hook (this.$el), wrapping the row in an href, and hiding the edit column. However, it seems like a bit of a hack. Any recommendations on how best to accomplish this?
<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>