how to display to buttons delete and edit in field action in vuejs and bootstrap

Question

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:

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' }
        ]
      }
    }
  }

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.

user_4116300 · Answer

You can achieve this by using of slot attribute in your template.

Live Demo :

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        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 "}
        ]
      }
    },
    methods: {
      doEdit(item) {
        this.$set(item, 'temp', JSON.parse(JSON.stringify(item)))
        this.$set(item, 'editing', true)
      },
      doSave(item) {
        this.$set(item, 'editing', false)
        for(let key in item.temp){
          if(item[key] != item.temp[key]){
            item[key] = item.temp[key]
          }
        }
      },
      doCancel(item) {
        this.$set(item, 'editing', false)
        this.$delete(item, 'temp')
      }
    }
  })
}

how to display to buttons delete and edit in field action in vuejs and bootstrap

1 Answers