<transition-group> children 必须键入：<p>

Question

相关：

在：

https://codesandbox.io/s/klvs8

in, 组件 InventorySectionDraggable:

<template> 
  <div class="container-fluid">
    <div class="col-md-6">
      <draggable
        class="list-group"
        tag="ul"
        v-model="itemSectionProps.itemSectionCategory"
        v-bind="dragOptions"
        :move="onMove"
        @start="isDragging = true"
        @end="isDragging = false"
      >
        <transition-group type="transition" :name="'flip-list'">
          <p
            class="list-group-item"
            v-for="category in itemSectionProps.itemSectionCategory"
            :key="category.itemSectionCategoryId"
          >
            <i
              :class="
                category.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
              "
              @click="category.fixed = !category.fixed"
              aria-hidden="true"
            ></i>
            {{ category.itemSectionCategoryName }}
            <!-- <span class="badge">{{ element.order }}</span> -->

            <draggable
              v-if="category.itemSectionCategoryItemList"
              class="list-group"
              tag="ul"
              v-bind="dragOptions"
              :move="onMove"
              :list="category.itemSectionCategoryItemList"
            >
              <transition-group class="list-group" :name="'flip-list'">
                <p
                  class="list-group-item"
                  v-for="item in category.itemSectionCategoryItemList"
                  :key="item.itemSectionCategoryItemId"
                >
                  {{ item.itemSectionCategoryItemName }}
                  {{ item.itemSectionCategoryItemStatus }}
                  <!-- <span class="badge">{{ elementDeep.order }}</span> -->
                </p>
              </transition-group>
            </draggable>
          </p>
        </transition-group>
      </draggable>
    </div>

    <div class="list-group col-md-6">
      <pre>{{ listString }}</pre>
    </div>
  </div>
</template>

模型中的所有 ID 都是唯一的（并且是键控的）但是元素在拖放过程中不知何故消失了。此示例在几个小时前按预期运行。

不知道发生了什么on/wrong。任何见解将不胜感激。

Answer 1

元素：

<i
  :class="
    category.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
  "
  @click="category.fixed = !category.fixed"
  aria-hidden="true"
></i>

未键入。