Question

我在Firefox和Chromium中存在差异vue <transition-group>行为。

因此，我的表有几列（在简化示例中为两列），在每个<td>位置<transition-group>内，同一表行中这些组的元素相关。当第一列中的数字已更改时，第二列中的值也应重新排序。在Firefox中一切正常：

但是在Chromium中，仅当数字减少时才起作用，而仅当第二列增加时才起作用：

那怎么解决呢？

         let vm = new Vue({
            el: "#vue-block",
            data: {
               rows: [
                    {
                      label: 'row 1',
                      items: [
                        {number: 1, text: 'w'},
                        {number: 2, text: 'a'},
                        {number: 3, text: 's'},
                        {number: 4, text: 'd'}
                      ]
                    }
                ]
            },
            methods: {
                move: function(item, itemIdx) {
                  console.debug('item.Number', item.number);
                    let swapIdx = vm.rows[0].items.findIndex(function(inspectedItem, inspectedIdx) {
                    return inspectedItem.number === item.number
                        && itemIdx != inspectedIdx;
                });
                console.debug('swapIdx', swapIdx)
                if (swapIdx > -1) {
                    let swapItem = this.rows[0].items[swapIdx];
                    Vue.set(swapItem, 'number', itemIdx + 1);
                }

                    this.rows[0].items.sort((s1, s2) => {
                        return s1.number - s2.number;
                    });
                }
            }
        });

.item-list {
  margin-top: 1em;
}
.item-list-enter-active,
.item-list-leave-active {
  transition: all 0.4s;
}
.item-list-enter,
.item-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.item-list-move {
  transition: transform 0.4s;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js" type="text/javascript"></script>

<div id="vue-block">
<table>
    <tr v-for="row in rows">
        <td>
            {{ row.label }}<br>
          
            <transition-group name="item-list" tag="ul">
                <li v-for="(item, itemIdx) in row.items" v-bind:key="item.text">
                    <input type="number" v-model.number="item.number"
                           v-on:change="move(item, itemIdx)">          
                </li>      
            <transition-group>
        </td>
        <td>
            {{ row.label }}<br>
          
            <transition-group name="item-list" tag="ul">
                <li v-for="item in row.items" v-bind:key="item.text">
                    {{ item.text }}
                </li>      
            <transition-group>
        </td>      
    <tr>   
</table>
</div>

我也在控制台中看到警告：

"[Vue warn]: <transition-group> children must be keyed: <transition-group>"

并且不明白为什么，在v-bind:key="item.text"内为<li>指定了<transition-group>个属性

Same demo易于分叉。

Answer 1

您的结束 <transition-group> 标签不是结束标签。只需将其更改为 </transition-group>，您的代码就会完美运行 :)

编辑：通过完全重写您的代码解决了该问题：https://codepen.io/franzwilhelm/pen/YzGgoBz?editors=1111

您的问题很可能与 Vue 反应性有关

Chrome中的Vue.js过渡组重新排序问题

1 个答案: