Проблема переупорядочения в переходной группе Vue.js в Chrome - PullRequest
Новая
       9

Проблема переупорядочения в переходной группе Vue.js в Chrome

0 голосов
/ 19 октября 2018

У меня проблема с поведением разницы vue <transition-group> в Firefox и Chromium.

Итак, у меня есть таблица с несколькими столбцами (два в упрощенном примере), внутри каждого <td> лежит <transition-group>, элементыиз этих групп в одной строке таблицы связаны между собой.Когда число в первом столбце изменилось, значения во втором столбце также должны быть переупорядочены.В Firefox все идет хорошо:

Firefox behavior

Но в Chromium он работает правильно только при уменьшении числа, но при увеличении увеличивается только второй столбец:

Chromium behavior

Так как это исправить? 

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

То же демо для легкого разветвления.

...