开发者问题收集

Vue 中删除列表中的对象时出错

2019-02-28
1020
javascript vue.js web-applications

我正在使用 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

删除选项卡并将选定的选项卡更改为上一个选项卡。 但正如我所说，选项卡的标题并没有被删除，如下图所示：

picture 当我点击该选项卡时，出现此错误： 

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)

有人对此事有什么建议吗？

2个回答

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

<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
  }
},
ClaudiuAvr
2019-04-15

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

以下是存储库中 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> 组件挂载时，它会将自身作为子数组，但是当它被销毁时，它不会将自己从该数组中删除。

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

Decade Moon
2019-02-28