как добавить кнопку редактирования на Vue-Good-таблицы в VUE

Question

Я новичок в Vue, застрял в ситуации и не знаю, как это сделать, если кто-нибудь подскажет мне, как я могу это сделать, позвольте мне сначала показать мой код

<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>

и в сценарии

 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

            })

        },

Теперь моя проблема в том, что если я использую

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

, как предложено в этом https://jsfiddle.net/aks9800/hsf0sqf8/, это выдает ошибку, как поле не определено. Я просто хочу добавить дополнительноеКнопка действия для редактирования это очень хорошая таблица. Еще одна вещь, которая не предлагается в этой ссылке, например: - @ on-row-click = "onRowClick" не работает

Answer 1

Попробуйте это

<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>
          <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field == 'actions'">
          <a class="btn btn-sm primary"  @on-row-click="onRowClick">save</a>
        </span>
        <span v-else>
          {{props.formattedRow[props.column.field]}}
        </span>
      </template> 
   </vue-good-table>
</div>

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

            })

        },