使用vue draggable报错[Vue warn]: ＜transition-group＞ children must be keyed:

贴个vue draggable中文文档：vue.draggable中文文档 - itxst.com最近使用vue draggable时，想在推拽的组件里添加其它不能被拖拽的元素，因此使用了handle属性。结果报错，导致新增的元素并没有展示出来。解决办法：在该元素的父级绑定key以下为记录过程，以官方文档示例代码为例，示例代码部分如下：<div class="itxst"><di

半吊子月淼

9081人浏览 · 2021-12-17 14:21:28

半吊子月淼 · 2021-12-17 14:21:28 发布

贴个vue draggable中文文档：vue.draggable中文文档 - itxst.com

最近使用vue draggable时，想在推拽的组件里添加其它不能被拖拽的元素，因此使用了handle属性。结果报错，导致新增的元素并没有展示出来。

解决办法：在该元素的父级绑定key

以下为记录过程，以官方文档示例代码为例，示例代码部分如下：

<div class="itxst">
    <div>鼠标移动到加号上面才允许拖动</div>
        <div class="col">
            <draggable v-model="arr1" handle=".mover" :disabled="disabled" animation="300" @start="onStart" @end="onEnd">
                <transition-group>
                    <div class="item" v-for="item in arr1" :key="item.id"><span class="mover">+</span>{{item.name}}</div>
                </transition-group>
            </draggable>
        </div>
    </div>
</div>

图片效果：（可以点击+号正常拖拽。）

当添加一个不可拖拽的元素放在最后时，错误代码如下展示：

<div class="itxst">
    <div>鼠标移动到加号上面才允许拖动</div>
        <div class="col">
            <draggable v-model="arr1" handle=".mover" :disabled="disabled" animation="300" @start="onStart" @end="onEnd">
                <transition-group>
                    <div class="item" v-for="item in arr1" :key="item.id"><span class="mover">+</span>{{item.name}}</div>
                    <!--添加一个不可拖拽的元素-->
                    <div class="item item1" style="background: pink;">这里是不能被拖动的容器</div>
                </transition-group>
            </draggable>
        </div>
    </div>
</div>

然后会出现报错：[Vue warn]: <transition-group> children must be keyed:并且该元素未渲染到页面上，虽然不影响拖拽的功能。

解决办法：在该元素父级绑定key，代码如下

<div class="itxst">
    <div>鼠标移动到加号上面才允许拖动</div>
        <div class="col">
            <draggable v-model="arr1" handle=".mover" :disabled="disabled" animation="300" @start="onStart" @end="onEnd">
                <transition-group>
                    <div class="item" v-for="item in arr1" :key="item.id"><span class="mover">+</span>{{item.name}}</div>
                    <!--添加一个不可拖拽的元素-->
                    <!--key值请根据自己需要定义-->
                    <div class="item item1" key="noDraggable" style="background: pink;">这里是不能被拖动的容器</div>
                </transition-group>
            </draggable>
        </div>
    </div>
</div>

效果图片如下：（只有class="mover"的元素才可被拖拽）

另外我查了一下绑定数组的方式的区别，一个是v-model绑定，一个是:list="list"绑定，没发现说v-model绑定的数据在拖拽时只做了表象拖拽，没做数据的顺序拖拽。我体感两个效果是一样的。

完整演示代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue.draggable handle例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
    <style>
        /*定义要拖拽元素的样式*/
            .itxst {
                margin: 10px;
            }
            .col {
                width: 80%;
                flex: 1;
                padding: 10px;
                border: solid 1px #eee;
                border-radius: 5px;
                float: left;
            }
            .col + .col {
                margin-left: 10px;
            }
            .item {
                padding: 6px 12px;
                margin: 0px 10px 0px 10px;
                border: solid 1px #eee;
                background-color: #f1f1f1;
            }
            .item + .item {
                border-top: none;
                margin-top: 6px;
            }
      
            .mover {
                background-color: #fdfdfd;
                cursor: move;
                padding:3px 6px;
            }
      
    </style>
</head>
<body style="padding:10px;">
    <div id="app">
        <!--使用draggable组件-->
        <div class="itxst">
            <div>鼠标移动到加号上面才允许拖动</div>
            <div class="col">
                <draggable handle=".mover" filter=".item1" v-model="arr1" :disabled="disabled" animation="300" @start="onStart" @end="onEnd">
                    <transition-group>
                      <div class="item" v-for="item in arr1" :key="item.id"><span class="mover">+</span>{{item.name}}</div>
                      <div class="item item1" key="noDraggable" style="background: pink;">这里是不能被拖动的容器</div>
                    </transition-group>
                </draggable>
            </div>
        </div>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p>展示数据变化：</p>
      <div>
        <div v-for="(item, index) in arr1" :key="item.id">{{item.name}}</div>
      </div>
    </div>
    <script>
        // debugger;
        Vue.component('vuedraggable', window.vuedraggable.name)
        var app = new Vue({
            el: '#app',
            components: {
                vuedraggable,
            },
            data() {
                return {
                    disabled: false,
                    //定义要被拖拽对象的数组
                    arr1: [
                        { id: 1, name: 'www.itxst.com' },
                        { id: 2, name: 'www.jd.com' },
                        { id: 3, name: 'www.baidu.com' },
                        { id: 4, name: 'www.taobao.com' }
                    ]
                };
            },
            methods: {
                //设置禁止拖拽
                setJY() {
                    this.disabled = true;
                },
                //设置启用拖拽
                setQY() {
                    this.disabled = false;
                },
                onStart() {
                    this.drag = true;
                },
                //开始拖拽事件
                onStart() {
                    this.drag = true;
                },
                //拖拽结束事件
                onEnd() {
                    this.drag = false;
                },
            },
        });
    </script>