vue-grid-layout: обновлять только определенный элемент сетки

Question

Я работаю над большим проектом для нашей компании, в котором наши клиенты могут добавлять (и удалять) свои персональные информационные панели. В этих панелях есть возможность добавлять все виды анализов, которые мы продаем.

Для этой работы я использую vue-grid-layout .

В моей базе данных есть все таблицы, в которых хранятся информационные панели для каждого пользователя, а также анализ, который они добавили в свои информационные панели.

Моя рутина (ы) работают быстро и хорошо. После того, как пользователь заходит на наш портал, я заполняю его информационные панели из серверной части API. API дает мне ответ JSON с инструментальными панелями и анализами пользователей (которые на самом деле являются vue компонентами). например:

[
  {
   "did":1,
   "dname":"Dashboard name",
   "ddesc":"Description of the dashboard",
   "is_active":1,
   "dashboardViews":[
       {
        "x":0,
        "y":0,
        "w":6,
        "h":15,
        "i":4,
        "comp":"c-specific-component"
       }
    ]
   }
]

Я использую bootstrap-vue для своей работы с рамой. Я использую вкладки для панели пользователя и заполняю их следующим циклом v-for:

<b-tab v-for="dash in dashViews" :key="dash.did" :title="dash.dname" :active="dash.is_active === 1" title-item-class="custom-tab-title">
    <b-row class="row-padding-margin">
        <b-col lg="12">
            <b-btn size="md" :variant="themeVariant.colDanger" class="button-margin float-right" @click="showDeleteDashboardModal(dash.did)"><icon name="trash-alt" /> Delete dashboard</b-btn>
            <b-btn size="md" :variant="themeVariant.colPrimary" class="button-margin float-right" @click="editDashboard(dash.did)"><icon name="edit" /> Rename dashboard</b-btn>
            <b-btn size="md" :variant="themeVariant.colSecondary" class="button-margin float-right" @click="editDashboard(dash.did)"><icon name="share-alt" /> Share dashboard</b-btn>
        </b-col>
    </b-row>
    <b-row class="row-padding" style="margin-bottom: -10px">
        <b-col lg="12">
            <b-alert variant="default" :class="themeVariant.alertStyle" show>{{ dash.ddesc }}</b-alert>
        </b-col>
    </b-row>
    <!-- DASHBOARD CONTENT WITH DRAGGABLE AND RESPONSIVE GRID -->
    <grid-layout
            :layout.sync="dash.dashboardViews"
            :col-num="6"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="false"
            :responsive="true"
            @layout-updated="layoutUpdatedEvent">
        <grid-item v-for="view in dash.dashboardViews"
                   :key="view.i"
                   :x="view.x"
                   :y="view.y"
                   :w="view.w"
                   :h="view.h"
                   :i="view.i"
                   @resized="resizedEvent"
                   @moved="movedEvent">
            <component :is="view.comp" class="component-settings-grid"></component>
        </grid-item>
    </grid-layout>
</b-tab>

Мой dashViews объект данных - это computed property.

Моя «проблема»: когда пользователь удаляет информационную панель, весь dashViews снова заполняется (конечно, реактивность vue).

Мне было интересно: можно ли это предотвратить и удалить только удаленную панель мониторинга (в сочетании с POST на стороне, чтобы сообщить db, что панель мониторинга удалена)?

Answer 1

Итак, как я сказал в комментарии: я использую splice и push, чтобы получить желаемый результат.

Когда пользователь добавляет панель мониторинга, я отправляю настройки панели мониторинга на свойAPI и вставьте его в db.когда API дает мне ответ 200 http, я помещаю панель мониторинга в массив dashViews (используя мутацию vuex):

pushNewDashBoard(state, data) {
    state.dashViews.push(data);
    state.nodata = false;
}

Когда пользователь удаляет панель мониторинга, я такжеотправить действие на мой бэкэнд API.Опять же, когда я получаю ответ 200 http, я также удаляю панель мониторинга из массива следующим образом (также используя мутацию vuex):

removeDashboard(state, id) {
    let index = -1;
    for (let i = 0; i < state.dashViews.length; ++i) {
        if (state.dashViews[i].did === id) {
            index = i;
            break;
        }
    }
    if (index > -1) {
        state.dashViews.splice(index, 1);
    }
}

Вышеупомянутые методы спасают меня от перестройки формывсе dashViews каждый раз, когда пользователь удаляет или добавляет панель мониторинга.