VUEX：添加项目后，Vuetify Expansion面板插槽不会更新

Question

我有一个使用Vuetify制作的数据表。当用户单击某个项目（该行）时，它会显示一个扩展面板，其中包含有关该项目的更新，用户可以在其中添加新的更新。

扩展面板上有一个按钮，用户在要添加新更新时可以单击该按钮。该按钮将激活带有表单的对话框。用户输入信息，然后单击“保存”按钮，该按钮将调用一个变体来添加新更新。

该突变实际上有效，但是当我关闭对话框时，该信息不会出现在扩展面板中。

功能如下：

DashboardExpansionPanel.vue

...
computed: {
    ...mapGetters({
        getItems: 'details/items',
        loading: 'details/loading',
        error: 'details/error'
    }),
    items() {
        return this.getItems(this.offerTransformer);
    }
},
methods: {
    ...mapActions({
        addDetail: 'details/add'
    }),
    save() {
        const data = {...this.editedItem, product_id: this.product};
        this.addDetail(data);
    }
  }
}

details.module.js

...
const initialState = {
    requesting: false,
    error: false,
    errMsg: ''
};
export const details = { 
    actions: {
        add({ dispatch, commit}, payload) {
            commit('detailRequest');
            const options = {...} // this is not important right now
            apiService.postRequest('details', payload, options)
            .then(data => {
                dispatch('entities/add', {...data , entity: 'details'}, { root: true });
                commit('detailSuccess');
            },
            err => {
                commit('detailsError', err);
            }
            );
        }
    },
    ...
    getters: {
        loading: state => state.requesting,
        error: state => state.error,
        items: (state, getters, rootState, rootGetters) => (productID) => {
        const product = rootGetters['entities/getEntityById']('products', productID);
        return product.details.map((key) => (rootGetters['entities/getEntityById']('details', key)));
    }
    }
...

entities.module.js

...
mutations: {
    update(state, entities) {
        state = _.merge(state, entities);
    },
    add(state, { result, entities , entity }) {
       // Data is normalize using normalizr
        Vue.set(state[entity], result, entities[entity][result]);

        if(entity === 'details') {
            state.products[entities.details[result].productId].details.push(result);
        }
    }
},
getters: {
    getEntityById: (state) => (entity, id) => {
        return state[entity][id];
    }
}

更新1 当产品没有详细信息时，就会发生这种情况。换句话说，当产品的明细长度为零时。当产品具有先前的详细信息时，它会显示新添加的更新

更新2

DashboardExpansionPanel.vue（模板）

<template>
    <div class="expand--slot pa-3">
    <v-data-table class="details-table" :headers="headers" :items="items" hide-actions>
        <template slot="items" slot-scope="props">
            <td>{{ props.item.quantity }}</td>
            <td>{{ props.item.codes || "Codes not assign yet" }}</td>
            <td>{{ props.item.guide || "Guide not assign yet" }}</td>
            <td>{{ props.item.deliveryOn || "Not delivered yet" }}</td>
            <td><pre>{{ props.item.status || "Without more info..." }}</pre></td>
            <td class="justify-center layout px-0">
             <v-icon small class="mr-3" @click="editItem(props.item)">edit</v-icon>
             <v-icon small @click="deleteItem(props.item)">delete</v-icon>
         </td>
     </template>
     <template slot="no-data">
        We are sorry, there's not information about this product :(
    </template>
...