操作按钮在使用vuetify和vuex时不起作用

Question

[这里，我用vue和vuetify设置了laravel 6项目。我正在尝试创建Crud表，试图从Vuex存储中获取数据，但是对于某些我却看不到我的操作按钮。我可以看到带有数据的表，但是动作库为空。我已经创建了商店文件夹，并且在我的商店文件夹中有Store.js文件。

Stage.vue

<template>
<v-app id="inspire">
  <v-data-table 

    class="elevation-1" 

  >

    <template v-slot:top>

      <v-toolbar flat color="dark">
        <v-toolbar-title>My Stage</v-toolbar-title>
        <v-divider
          class="mx-4"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>

        <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 class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="12" >
                    <v-text-field autofocus color="error" v-model="editedItem.code" label="Code"></v-text-field>
                  </v-col>

                   <v-col cols="12" sm="12" >
                    <v-text-field autofocus color="error" v-model="editedItem.name" label="Name"></v-text-field>
                  </v-col>

                   <v-col cols="12" sm="12" >
                    <v-text-field autofocus color="error" v-model="editedItem.description" label="Description"></v-text-field>
                  </v-col>

                </v-row>

              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="error darken-1" text @click="close">Cancel</v-btn>
              <v-btn color="error darken-1" text @click="save">Save</v-btn>
            </v-card-actions>


          </v-card>
        </v-dialog>
      </v-toolbar>




    </template>


    <template v-slot:item.action="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        mdi-content-save-edit-outline
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        mdi-delete
      </v-icon>
    </template>




  </v-data-table>



</v-app>
</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 Record' : 'Edit Record'
    }
  },
  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>

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: 'name', 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

在商店的state.headers属性中，您拥有：

{ text: 'Actions', value: 'name', sortable: false }

这应该是：

{ text: 'Actions', value: 'action', sortable: false }

value属性的值错误。另外，您还没有将导入的headers和items分配给v-data-table元素。应该是：

<v-data-table
  :headers="headers"
  :items="items"
>
   <!-- ... the rest of your code ... -->

Here is a working codepen。