Wdrażam aplikację klienta z vue.js. W tej aplikacji mam kilka zakładek, które są renderowane za pomocą V-for. Ta tablica karta jest tworzona w ten sposób w Vuex Store:

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: ''
  }
]

Używam Galters, aby załadować zakładki w moim sklepie Vuex, który sprawia, że zakładki za pomocą następującego szablonu:

<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>

Używam elementów Vuelax do tworzenia wyświetlaczy kart. Każdy obiekt na tej liście jest zakładka w moim przednim końcu, który pokazuje powiązane dane po kliknięciu każdej karcie. Robi się doskonale, gdy próbuję pokazać karty, a nawet dodać inny obiekt w tablicy. Problem polega na tym, kiedy próbuję usunąć określony element z tej tablicy, zawartość zniknie, ale tytuł zakładki (przycisk, w którym mogę wybrać kartę) pozostaje na stronie. używam

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

Aby usunąć kartę i zmieniając wybraną kartę do poprzedniego. Ale ponieważ powiedziałem tytuł karty nie jest usuwany jak obraz poniżej:

obraz A kiedy kliknął na tę kartę, otrzymuję ten błąd:

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)

Czy ktoś ma jakieś sugestię w tej sprawie?

1
nima soufiloo 28 luty 2019, 14:02

2 odpowiedzi

Najlepsza odpowiedź

Wydaje się, że jest to problem z Vuelax biblioteka. Komponent <vs-tabs> nie obsługuje składników <vs-tab> Dodaje / usunięte jako elementy dziecka dynamicznie.

Oto fragment z vstab.vue Plik w repo:

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
  })
}

Gdy składnik {{X0} jest zamontowany, dodaje się do rodzica (<vs-tabs>) jako dziecko, ale nie usuwa się z tej tablicy, gdy zostanie zniszczony.

Możesz otworzyć problem na swojej stronie Github, aby sprawdzić, czy mogliby wspierać, co chcesz, lub możesz przesłać żądanie pull.

1
Decade Moon 28 luty 2019, 11:39

Możesz po prostu dodać klucz do elementu macierzystego, aby zmusić derrender.

<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>

Po tym dodanie obserwatora na items:

watch: {
  items (val) {
    this.forceRender += 1
  }
},
2
barbsan 15 kwiecień 2019, 06:26