0
148
Vistashow to display to buttons delete and edit in field action in vuejs and bootstrap
I am working a crud app with vue.js add bootstrap I want to create a dynamic data table in vue.js and bootstrap.
I have create for html:
<template>
<div>
<b-table striped hover :items="items" :fields="fields"></b-table>
</div>
</template>I completed there files and items from json also for 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>My code look like picture below until now:
but how I can make that in field Action to display to button edit and delete like below:
Thanks.
·
Juan Pablo Isaza
Responde la pregunta