CODEWITHSUNDEEP
vue.jsbootstrap-4vue-component
Charlotte45
Charlotte45

Reputation: 143

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

I am trying to add a button to every column of my table by using a Vuejs template and I get the Actions column but the button does not appear. I think I am missing something

<template>
  <div id="menu">
    <br>
    <b-table
        :items="items"
        :fields="fields">
        <template slot="actions" slot-scope="props">
          <span>
            <b-btn>Edit</b-btn>
          </span>
        </template>
    </b-table>
  </div>
</template>

and

export default {
  data() {
    return {
      items: [],
      fields: [
        "name",
        "days",
        "actions"
      ]
    };
  },

Upvotes: 0

Views: 3764

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28434

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/[email protected]/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/[email protected]/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>

Upvotes: 3

Related Questions