I m new to Vue and stuck in a situation and don't know how to do that if anybody suggests me how I can do this let me show my code first

```
<div class="table-responsive-sm">
    <vue-good-table
        title="Shop List Table"
        :columns="columns"
        :rows="rows"
        :paginate="true"
        :lineNumbers="true"
        :globalSearch="true" >
  <template slot="table-row" slot-scope="props" ><a class="btn btn-sm primary"  @on-row-click="onRowClick">save</a></template>
   </vue-good-table>

```

and in script 

```
 data(){
   return{
       columns: [
            {
              label: 'Brand Name',
              field: 'brand_name', 
            },
             {
              label: 'Brand Desc',
              field: 'brand_desc',  
            },
             {
               label: 'Action',
               field: 'before',
            },        
       ],
   rows:[],
          }
       }
      getTotals(){
            var self = this;
            var new1=[];
            this.$http.get('/api/brands')
            .then(function (response) {
             self.rows=response.data

            })

        },

```

now my problem is that if I use 

```
 <span v-if="props.column.field == 'before'">
     before
  </span>   

```

as suggested in this <https://jsfiddle.net/aks9800/hsf0sqf8/> it throws an error like field not defined I just want to add an extra action button for edit this is vue-good table one more thing none of the action as suggested in this link for eg:- @on-row-click="onRowClick" not working