列表的拖拽功能:
一、下载依赖
npm i -S vuedraggable
二、页面使用
<template>
<div>
<vuedraggable class="wrapper" v-model="list">
<transition-group>
<div v-for="item in list" :key="item.projectid" class="item">
<p>{{item.name}}</p>
</div>
</transition-group>
</vuedraggable>
</div>
</template>
<script>
import vuedraggable from "vuedraggable";
export default {
components: { vuedraggable },
props: {},
data() {
return {
list: [
{
name: "体型",
projectid: 1,
},
{
name: "屈臂悬垂",
projectid: 2,
},
{
name: "引体向上",
projectid: 3,
},
],
};
},
updated() {
console.log(this.list);
},
}
三、报错:Value and list props are mutually exclusive! Please set one or another.
这个原因是: