Vue method not firing

Question

I am working on a project that uses Vue2 (2.5.3) along with Vue Tables 2. All I am trying to do is add an anchor around each row, as the linked example shows, and invoke the edit() function. However, it doesn't seem to fire at all and I am not getting any errors. Any idea why this is?

.vue file

  <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)"></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';

    Vue.use(ClientTable, {
        perPage: 3
    }, false);

    export default {
        methods: {
          edit: function(id){
              console.log("OK", id);
          }
        },
        data() {
            return {
                columns: ['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>

<style lang="scss">
.VuePagination__count {
    display:none;
}
</style>

Answer 1

The first problem I see is that there is no way that I can tell from the documentation to wrap an entire row the way you are proposing with a link. There are several pre-defined slots you can customize, and you can also use a slot for each column you pass into the columns property.

Templates allow you to wrap your cells with vue-compiled HTML. It can be used in any of the following ways:

Note that says cells. So you can provide a template for each individual cell by specifying the name of the column as the slot.

In your example, there is no edit column, so nothing is actually rendered.

You could add an edit column to columns:

columns: ['edit', 'id','name','age'],

And then your template would work; it would add the font awesome icon to a column in the table.

Here is an example.