import draggable from 'vuedraggable' Vue.use(draggable.name, draggable) 这样使用为啥会报错
时间: 2023-11-21 17:55:59 浏览: 161
在使用`Vue.use(draggable.name, draggable)`时,会报错是因为`Vue.use`方法的第一个参数应该是一个插件对象或者是一个包含插件对象的数组,而不是一个字符串。正确的使用方式应该是`Vue.use(draggable)`,这样就可以正确注册`draggable`组件了。
相关问题
vite import draggable from 'vuedraggable' Vue.use(draggable.name, draggable)报错
根据提供的引用内容,您使用了错误的语法来注册Vue.Draggable。正确的语法应该是:
```javascript
import draggable from 'vuedraggable'
Vue.use(draggable)
```
请注意,您不需要传递`draggable.name`作为第一个参数,因为它只是一个字符串,而不是Vue.Draggable的实际组件。另外,请确保您已经正确安装了Vue.Draggable,可以通过运行`npm install vuedraggable`或`yarn add vuedraggable`来安装它。
sortable获取拖拽后的数据_Vue.Draggable - 基于 Vue.js 丝般柔滑的拖拽排序组件
好的,您的问题是如何使用 Vue.Draggable 组件获取拖拽后的数据?
使用 Vue.Draggable 组件可以轻松地实现拖拽排序功能。要获取拖拽后的数据,可以使用该组件的 change 事件。
以下是示例代码:
```
<draggable v-model="list" @change="handleChange">
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>
```
在上述代码中,我们绑定了一个数组 list 到 draggable 组件的 v-model 上。同时,我们监听了 change 事件,并将其绑定到一个名为 handleChange 的方法上。
接下来,我们需要在组件的 methods 中定义 handleChange 方法:
```
methods: {
handleChange(event) {
console.log(event);
}
}
```
在 handleChange 方法中,我们可以打印出 event 对象,它包含了拖拽前后的数据。您可以根据需要对 event 对象进行处理,从而获取拖拽后的数据。
希望这个回答能够帮到您!
阅读全文