javascript - 在vue中删除列表中的对象时出错

Question

我正在使用 vue.js 部署客户端应用程序。 在这个应用程序中，我有一些使用 v-for 呈现的选项卡。此选项卡数组在 vuex 存储中的格式如下:

tabs: [
  {
    id: 1,
    title: 'first tab',
    number: '09389826331',
    accountName: 'DelirCo',
    contactName: 'PourTabarestani',
    startTime: '2019-02-25 15:11:30',
    endTime: '2019-02-25 18:04:10',
    duration: null,
    subject: '',
    description: ''
  },
  {
    id: 2,
    title: 'second tab',
    number: '09124578986',
    accountName: 'Cisco',
    accountGUID: '',
    contactName: 'Arcada',
    contactGUID: '',
    startTime: '2019-02-25 15:11:45',
    endTime: '2019-02-25 15:13:55',
    duration: null,
    subject: '',
    description: ''
  }
]

我正在使用 getter 加载我的 vuex 商店中的选项卡，它使用以下模板呈现选项卡:

<template>
  <div id="Tabs">
    <vs-tabs color="#17a2b8" v-model="selectedTab">
      <vs-tab v-for="tab in tabs" :key="tab.id" :vs- 
        label="tab.title">
        <Tab :tab="tab"></Tab>
      </vs-tab>
    </vs-tabs>
  </div>
</template>

我正在使用 vuesax 组件来创建选项卡显示。 此列表中的每个对象都是我前端的一个选项卡，当我单击每个选项卡时，它会显示相关数据。 当我尝试显示选项卡或什至在数组中添加另一个对象时，它表现得非常好。 问题是当我尝试从此数组中删除某个项目时，内容消失但选项卡标题(我可以用它选择选项卡的按钮)保留在页面上。 我正在使用

state.tabs.splice(objectIndex, 1)
state.selectedTab -= 1

用于删除选项卡并将所选选项卡更改为上一个选项卡。 但正如我所说，标签的标题并没有像下图那样被删除:

当我单击该选项卡时，出现此错误:

webpack-internal:///./node_modules/vuesax/dist/vuesax.common.js:4408 Uncaught TypeError: Cannot set property 'invert' of undefined
at VueComponent.activeChild (webpack-internal:///./node_modules/vuesax/dist/vuesax.common.js:4408)
at click (webpack-internal:///./node_modules/vuesax/dist/vuesax.common.js:4127)
at invoker (webpack-internal:///./node_modules/vue/dist/vue.esm.js:2140)
at HTMLButtonElement.fn._withTask.fn._withTask (webpack-internal:///./node_modules/vue/dist/vue.esm.js:1925)

有人对这件事有什么建议吗？

Answer 1

您可以只向父元素添加一个键来强制重新渲染。

<div :key="forceRender">
    <vs-tabs :value="activeTab">
      <template v-for="item in items">
        <vs-tab :label="item.name" @click="onTabChange(item)">
          <div class="con-tab-ejemplo">
            <slot name="content"></slot>
          </div>
        </vs-tab>
      </template>
    </vs-tabs>
  </div>

之后在 items 上添加观察者:

watch: {
  items (val) {
    this.forceRender += 1
  }
},