how to add button dynamically in table bootstrap vuejs?

Question

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);
    });
   },
  };

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

tao · Accepted Answer · 2022-04-28 09:59:40Z

1

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

edited Apr 28, 2022 at 9:59

answered Apr 28, 2022 at 9:17

tao

91.1k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to add button dynamically in table bootstrap vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related