[Vuejs]-Add a button in every row to a b-table using template

by

3👍

✅

Try this:

new Vue({
  el: "#menu",
  data: () => ({
    items: [{name:'name', days:'days'}],
    fields: ["name", "days", "actions"]
  }),
  methods: {
    editItem(item) { console.log(item); }
  }
});
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>

<div id="menu">
  <b-table :items="items" :fields="fields">
    <template v-slot:cell(actions)="{ item }">
      <span><b-btn @click="editItem(item)">Edit</b-btn></span>
    </template>
  </b-table>
</div>
👤Majed Badawi

Leave a comment