CODEWITHSUNDEEP
vue.jsdatatablebootstrap-vue
Indra suandi
Indra suandi

Reputation: 161

how to add button dynamically in table bootstrap vuejs?

Im new in vue.js and im facing frontend issue hot to add Edit button in every row dynamically this my

<template>
<div>
<NavBar />
<div class="container mt-3">
    <h3>FOO</h3>
  <div>
    <b-table striped hover :items="items"></b-table>
  </div>
</div>
</div>
</template>

and this how I fetching the items

export default {
name: "PageTemplateView",
components: {
  NavBar,
},
data() {
return {
    items: []
  }
},
mounted() {
axios
  .get("http://localhost:1001/")
  .then((res) => {
    let objek = res.data.data;
    objek = objek.topping
    this.items = objek;
  })
    .catch(function (error) {
      console.log(error);
    });
   },
  };

enter image description here

I want to add new field action after field Type, and render the button for edit every row i choosed

Upvotes: 0

Views: 792

Answers (1)

tao
tao

Reputation: 90277

Specify the fields and pass them to your table.

  data: () => ({
    fields: [
      'id', 'type', 'actions'
    ]
  })

In template:

<b-table :items="items" :fields="fields">
  <template #cell(actions)="{item}">
        Go wild...
  </template>
</b-table>

You can see all available scope props of cell({key}) slot here.

Working example here

Upvotes: 1

Related Questions