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。

vue-grid-layout：仅更新特定的网格项

1 个答案: