Estoy trabajando en una aplicación crud con vue.js, agregue bootstrap. Quiero crear una tabla de datos dinámica en vue.js y bootstrap.
He creado para html:
<template> <div> <b-table striped hover :items="items" :fields="fields"></b-table> </div> </template>Completé allí archivos y elementos de json también para javascript.
script> export default { name:'DataTable', data() { return { // Note `isActive` is left out and will not appear in the rendered table fields: [ "id", "name", "email", "phone", "action"], items: [ { id: 1, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "}, { id: 2, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "}, { id: 3, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "}, { id: 4, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "}, { id: 5, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "}, { id: 6, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "}, { id: 7, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "}, { id: 8, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "}, { id: 9, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "}, { id: 10, name:"Leannes", email: "Sincere@april.biz", phone:"1-770-736-8031 x56442 "} // { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' }, // { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' }, // { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' } ] } } } </script> Mi código se parece a la imagen de abajo hasta ahora: 
pero cómo puedo hacer eso en el campo Acción para mostrar el botón editar y eliminar como se muestra a continuación: 
Gracias.