how to add edit button on vue-good-table in vue

Question

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

The docs say you need to use slots to provide HTML to your tds github.com/xaksis/vue-good-table#custom-row-template — Phiter
– Phiter, Commented Apr 24, 2018 at 13:31
@Phiter i use slot but issue is same it throw field is not define — user8411743
– user8411743, Commented Apr 24, 2018 at 14:45
@Phiter i found my mistake actually i was using 1.24 version — user8411743
– user8411743, Commented Apr 24, 2018 at 15:27
xaksis.github.io/vue-good-table/guide/advanced/… posted the link again (older one no longer pointing directly), for the sake of those who may come here later on — gthuo
– gthuo, Commented Jul 2, 2018 at 9:26

Julio Cesar Montenegro · Accepted Answer · 2018-08-02 23:38:56Z

Try this

<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

            })

        },

MegaMilivoje · Accepted Answer · 2021-11-08 14:13:54Z

Here is very good example how to add "edit" button in a row by marekfilip

https://jsfiddle.net/marekfilip/jm4ywzor/

html:

<div id="app">
  <vue-good-table
    :columns="columns"
    :rows="rows" >
    
    <template slot="table-row" slot-scope="props">
      <span v-if="props.column.field == 'before'">
        <button @click="editRow(props.row.id)">Edit</button>
        <button @click="deleteRow(props.row.id)">Delete</button>
      </span>
      <span v-else>
        {{props.formattedRow[props.column.field]}}
      </span>
    </template>
    
  </vue-good-table>
    
  <span>{{ text }}</span>

</div>

javascript

new Vue({
  el: '#app',
  data() {
    return {
      columns: [
        {
          label: 'Before',
          field: 'before'
        },
        {
          label: 'ID',
          field: 'id',
          sortable: true,
        },
        {
            label: 'Text',
          field: 'text',
          type: 'number',
          sortable: true,
        },
      ],
      rows: [
        { text: 'A', id: 1 },
        { text: 'B', id: 2 },
        { text: 'C', id: 3 },
        { text: 'D', id: 5 },
      ],
      text: ''
    };
  },
  methods: {
    editRow(id) {
        this.showAlert(id, 'EDIT')
    },
    deleteRow(id) {
        this.showAlert(id, 'DELETE')
    },
    showAlert(id, type) {
        this.text = `You clicked ${type} on row ID ${id}`
    }
  }
});

Collectives™ on Stack Overflow

how to add edit button on vue-good-table in vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related