VUEX: слот панели расширения Vuetify не обновляется после добавления элемента - PullRequest
Новая
       18

VUEX: слот панели расширения Vuetify не обновляется после добавления элемента

0 голосов
/ 21 марта 2019

У меня есть таблица данных, созданная с помощью 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 (шаблон) 

<code><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..." }}
редактировать </ v-icon> удалить </ v-icon> К сожалению, нет информации об этом продукте :( ...
...