Vue.js переходной группы удаление и добавление снова - PullRequest
Новая
       15

Vue.js переходной группы удаление и добавление снова

2 голосов
/ 12 марта 2019

У меня есть список форм в шаблоне одной страницы Vue. Шаблон загружает содержимое в виде массивов асинхронно, которые затем повторяются для создания форм. список является потомком <transition-group>. Каждая форма имеет кнопку вверх / вниз, позволяющую им перемещаться вверх и вниз по списку; при нажатии вверх / вниз форма выше / ниже меняет местами щелчкованную форму с использованием анимации перехода.

Анимация списка абсолютно прекрасна, когда страница загружается с асинхронным содержимым во время ловушки шаблона created().

Однако, когда список пуст во время created() или когда все формы в списке удалены, а затем добавлена ​​новая форма, анимация заказа перестает работать. Больше ничего не ломается, вся реактивность и т. Д. Полностью в порядке. Учитывая ниже, есть ли решение этой ошибки?

Я постараюсь предоставить краткую заглушку, которая будет ниже, если она будет полезна:

[HTML] 

<template>
...
<transition-group v-if="sections.length"
                          name="flip-list"
                          tag="div">
  <div v-for="(section, i) in sortedOrder"
       :key="sortedOrder[i].id>
    <div>
       <button @click.prevent="decrementOrder(section.order, i)">
         <i class="fas fa-chevron-up"></i>
       </button>
       <button @click.prevent="incrementOrder(section.order, i)">
         <i class="fas fa-chevron-down"></i>
       </button>
       ... FORM FIELDS ETC ...
    </div>
  </div>
</transition-group>
...
</template>

[JS] 

computed: {
  sortedOrder () {
      let sorted = this.sections
      return sorted.sort((a, b) => { return a.order - b.order })
    }  
},
methods: {
   ...
   addSection () {
      let newSection = {
        id: -1,
        order: this.sections.length,
        ...
      }
      let i = this.sections.push(newSection) - 1
      ...
    },
    deleteSection (id) {
      let wasSpliced = 0
      this.sections.forEach(function (section, i) {
        if (section.id === id) {
          this.sections.splice(i, 1)
          if (this.sections.length && this.sections.length > i) { 
            --this.sections[i].order
          }
          wasSpliced = 1
        } else if (wasSpliced) {
          --this.sections[i].order
        }
      }.bind(this))
    },
    decrementOrder (order, i) {
      if (order > 0) {
        this.sections.forEach((it, j) => {
          if (it.order + 1 === order) {
            ++this.sections[j].order
            --this.sections[i].order
          }
        })
      }
    },
    incrementOrder (order, i) {
      if (order <= this.sections.length - 1) {
        this.sections.forEach((it, j) => {
          if (it.order - 1 === order) {
            --this.sections[j].order
            ++this.sections[i].order
          }
        })
      }
    }
    ...
}

[CSS] 

...css
.flip-list-move {
transition: transform 1s;
}
...