在Vuex更新后强制道具在子组件中更新

问题描述

我有一个子组件（<BaseProjectTable>），该子组件在整个网站中都可以重复使用，其中包含Vuetify <v-data-table>组件。数据表的标题和内容项作为prop传递到组件中，并且项数据作为mapGetter从Vuex存储区映射到父项中。子组件包含每行的编辑功能，我正在使用mapAction从那里更新API和Vuex数据，其想法是，由于我的mapGetter是反应性的，因此应该更新数据，因此数据表显示。但是，这是行不通的。我可以通过开发工具看到状态更新很好，但是子组件的显示却没有。

以下是子<BaseProjectTable>组件的相关部分：

<template>
  <div>
    <v-data-table
      show-expand
      :headers="headers"
      :items="filteredItems"
      :search="search"
      tem-key="sow"
      @click:row="rowClick"
      :hide-default-footer="disablePagination"
      dense
      :disable-pagination="disablePagination"
    >
    ...
    </v-data-table>

    ...
    export default {
    name: "BaseProjectTable",props: {
      headers: Array,items: Array,loggedInUser: Object,title: String,max2chars: v => v.length <= 2 || 'Input too long!',editDialog: false,showPracticeFilter: {
        default: true,type: Boolean
      },showSEFilter: {
        default: true,showStatusFilter: {
        default: true,projectType: {
        type: String,default: 'active'
      },disablePagination: {
        type: Boolean,default: true
      },},methods: {
  ...mapActions('projects',{
        saveProject: 'saveProject',}),save() {
      // Update API and store with new data.
      this.saveProject({
        projectType: this.projectType,projectData: this.editedItem
      })
  },computed: {
      statuses()  {
        return this.projectType === 'active' ? this.activeStatuses : this.oppStatuses;
      },filteredItems() {
        return this.items.filter(d => {
          return Object.keys(this.filters).every(f => {
            return this.filters[f].length < 1 || this.filters[f].includes(d[f])
          })
        })
      },}

这是父组件中的相关代码：

<v-card>
  <BaseProjectTable
    :headers="headers"
    :items="activeProjects"
    :loggedInUser="loggedInUser"
    title="Active Projects"
    :disablePagination=false
  ></BaseProjectTable>
</v-card>
...
export default {
  computed: {
    ...mapGetters('projects',{
      activeProjects: 'activeProjects',closedProjects: 'closedProjects',opportunities: 'opportunities'
    }),}
}

save()方法更新activeProjects映射getter引用的Vuex存储中的数据（我已经在Vue devtools中验证了这是正确的）。它还显示了在开发工具的items标签中更新的组件本身中的Components值。由于使用mapGetters可以使数据具有反应性，因此我希望它也可以更新子组件中的数据，但不会。

根据我看到的here，我尝试了item-key的{​​{1}}属性，如下所示：

v-data-table>

（使用此组件的每条记录都具有唯一的<v-data-table show-expand :headers="headers" :items="filteredItems" :search="search" item-key="sow" @click:row="rowClick" :hide-default-footer="disablePagination" dense :disable-pagination="disablePagination" > 键），但这没用。

我唯一能想到的就是我如何在突变中编辑数据：

sow

与替换整个export const state = () => ({ active: [],closed: [],opportunities: [],}) export const getters = { activeProjects: state => state.active,closedProjects: state => state.closed,opportunities: state => state.opportunities,} export const actions = { saveProject({ commit },{projectType,projectData}) { commit(types.SAVE_PROJECT,projectData}); } } export const mutations = { [types.SAVE_PROJECT](state,projectData}) { // Get project from state list by sow field. const index = state[projectType].findindex(p => p.sow === projectData.sow); state[projectType][index] = projectData; } } 值相比。

我需要做什么才能使数据表显示我的更新值？

解决方法

通过Vue documentation，

Vue无法检测到对数组的以下更改

• 直接用索引设置项目时，例如vm.items [indexOfItem] = newValue
• 修改数组的长度时，例如vm.items.length = newLength

替换您拥有的东西

<div id="container">
  <h1>Hello World</h1>
  <p>Hello World 1</p>
  
  <button onClick="changeColor()">Change a Color</button>
</div>

此后，将检测到对数组的更改，并且吸气剂将按预期工作。