在 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
  }
},

Answer 2

这似乎是vuesax 库的问题。 <vs-tabs> 组件不支持作为子组件动态添加/删除<vs-tab> 组件。

以下是 repo 中 vsTab.vue 文件的摘录：

mounted(){
  this.id = this.$parent.children.length
  this.$parent.children.push({
    label: this.vsLabel,
    icon: this.vsIcon,
    id: this.$parent.children.length,
    listeners: this.$listeners,
    attrs: this.$attrs
  })
}

当<vs-tab> 组件被挂载时，它会将自己作为子组件添加到父组件 (<vs-tabs>)，但在销毁时它不会将自己从该数组中移除。

你可以在他们的 GitHub 页面上打开一个问题，看看他们是否可以支持你想要的，或者你可以提交一个拉取请求。