Action button not working using vuetify and vuex - button

Question

Here, I have setup laravel 6 project with vue and vuetify. I am trying to create crud table where I am trying to fetch data from vuex store but for some I am not able to see my action button. I can see my table with data but action coulmn is empty. I have created store folder and inside my store folder I have Store.js file.
Stage.vue
<template>
<div>
<h1 class="text-xs-center info--text mb-2">{{ message }}</h1>
<v-data-table
:headers="headers"
:items="items"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.code }}</td>
<td class="text-xs-right">{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.description }}</td>
<td class="justify-center layout px-0">
<v-btn icon class="mx-0" #click="editItem(props.item)">
<v-icon color="teal">edit</v-icon>
</v-btn>
<v-btn icon class="mx-0" #click="deleteItem(props.item)">
<v-icon color="pink">delete</v-icon>
</v-btn>
</td>
</template>
<template slot="no-data">
<v-alert :value="true" color="error" icon="warning">
Sorry, nothing to display here :(
</v-alert>
</template>
</v-data-table>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="error" dark class="mb-2" v-on="on">Add New Stage</v-btn>
</template>
<v-card>
<v-card-title>
<span>{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field label="Code" v-model="editedItem.code"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field label="Name" v-model="editedItem.name"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field label="Description" v-model="editedItem.description"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click.native="close">Cancel</v-btn>
<v-btn color="blue darken-1" text #click.native="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
name: 'Stage',
props: {
},
data: () => ({
dialog: false,
editedIndex: -1,
editedItem: {
code: '',
name: '',
description: ''
},
defaultItem: {
code: '',
name: '',
description: ''
}
}),
computed: {
message () {
return this.$store.getters.getMessage
},
headers () {
return this.$store.getters.getHeaders
},
items () {
return this.$store.getters.getItems
},
formTitle () {
return this.editedIndex === -1 ? 'New Stage' : 'Edit Stage'
}
},
watch: {
dialog (val) {
val || this.close()
}
},
methods: {
editItem (item) {
this.editedIndex = this.items.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},
deleteItem (item) {
const index = this.items.indexOf(item)
confirm('Are you sure you want to delete this item?') && this.$store.commit('deleteItem', index)
// Todo: Make this delete item from store
},
close () {
this.dialog = false
setTimeout(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
}, 300)
},
save () {
if (this.editedIndex > -1) {
Object.assign(this.items[this.editedIndex], this.editedItem)
// TODO: Edit item in the store.
this.$store.commit('updateItem', this.editedItem, this.editedIndex)
} else {
this.$store.commit('newItem', this.editedItem)
}
this.close()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
msg: 'Vuetify table of Vuex state items.',
headers: [
{
text: 'Code',
align: 'left',
sortable: true,
value: 'code'
},
{ text: 'Name', value: 'name' },
{ text: 'Description', value: 'description' },
{ text: 'Actions', value: 'description', sortable: false }
],
items: [
{
value: 'false',
code: 23,
name: 'dsvdf',
description: 'Le Manns'
},
{
value: 'false',
code: 1,
name: 'ddd',
description: 'Le Manns'
}
]
},
mutations: {
newItem (state, payload) {
state.items.push(payload)
},
deleteItem (state, payload) {
state.items.splice(payload, 1)
},
updateItem (state, payload, index) {
state.items[index] = payload
}
},
actions: {
},
getters: {
getMessage (state) {
return state.msg
},
getHeaders (state) {
return state.headers
},
getItems (state) {
return state.items
}
}
})

Answer 1

In the state.headers property of your store, you have:
{ text: 'Actions', value: 'name', sortable: false }
This should be:
{ text: 'Actions', value: 'action', sortable: false }
The value property has the wrong value. Also, you have not assigned the imported headers and items to the v-data-table element. It should be:
<v-data-table
:headers="headers"
:items="items"
>
<!-- ... the rest of your code ... -->
Here is a working codepen.