我有一个使用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>
...