操作按钮无法使用 vuetify 和 vuex

Question

在这里，我用 vue 和 vuetify 设置了 laravel 6 项目。我正在尝试创建 crud table ，我正在尝试从 vuex 商店获取数据，但对于某些人我看不到我的操作按钮。我可以看到我的 table 和数据，但操作库是空的。我已经创建了商店文件夹，在我的商店文件夹中我有 Store.js 文件。

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

在您商店的 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.

操作按钮无法使用 vuetify 和 vuex

Action button not working using vuetify and vuex

action

button

vuex

vuetify.js