Hiển thị nút action ở table trong VueJS

[Phan_Vu (Phan Vũ)]

Em muốn hiển thị các nút action(edit) ở các row trong table với code như thế này nhưng em chưa hiểu sao nó không hiển thị ạ

  <template>
      <div>
        <CCard>
          <b-table
                  id="table"
                  striped
                  bordered
                  fixed
                  hover
                  :fields="fields"
                  :items="items"
                  :per-page="perPage"
                  :current-page="currentPage">

            <template slot="edit">
              <b-button variant="warning">Chỉnh sửa</b-button>
            </template>
          </b-table>

          <b-pagination
                  align="center"
                  v-model="currentPage"
                  :total-rows="rows"
                  :per-page="perPage"
                  aria-controls="table">
          </b-pagination>
        </CCard>
      </div>
    </template>

    <script>
    import Vue from "vue";
    import BootstrapVue from "bootstrap-vue";
    Vue.use(BootstrapVue);

    export default {
      name: "RoleList",
      data() {
        return {
          perPage: 5,
          currentPage: 1,
          fields: [
            {key: 'index', label: 'STT', thClass: 'text-center width-col-5', tdClass: 'text-center width-col-5', sortable: true},
            {key: 'roleName', label: 'Vai trò', thClass: 'text-center width-col-50', tdClass: 'text-center width-col-50'},
            {key: 'edit', label: '', class: 'text-center'},
          ],
          items: [
            {index: '1', roleName: 'System Admin'},
            {index: '2', roleName: 'Admin'},
            {index: '3', roleName: 'Member'},
          ]
        }
      },
      computed: {
        rows(){
          return this.items.length;
        }
      }
    }
    </script>

[bossageek]

Trong document của BootstrapVue đã đề cập vấn đề custom data rồi bạn vào đọc document để hiểu rõ hơn nhé link đây.

[Phan_Vu (Phan Vũ)]

Cám ơn bạn đã giúp mình giải quyết vấn đề