vue.draggable拖拽拿到数组title
时间: 2023-10-14 07:24:43 浏览: 149
如果你想在使用 `vue.draggable` 插件进行拖拽排序操作时,获取到拖拽后的数组 `title`,可以使用它提供的 `@change` 事件监听器。
具体实现步骤如下:
1. 在 `vue.draggable` 标签上添加 `:list="title"` 属性,将 `title` 数组传递给插件。
```html
<template>
<div>
<draggable :list="title" @change="onChange">
<div v-for="item in title" :key="item.id">{{item.name}}</div>
</draggable>
</div>
</template>
```
2. 在 `methods` 中定义 `onChange` 方法,用于获取拖拽后的数组 `title`。
```javascript
<script>
export default {
data() {
return {
title: [{id: 1, name: 'title1'}, {id: 2, name: 'title2'}, {id: 3, name: 'title3'}]
}
},
methods: {
onChange() {
console.log(this.title)
}
}
}
</script>
```
当你在页面上进行拖拽排序操作时,`onChange` 方法会被触发,控制台会输出拖拽后的数组 `title`。你可以根据自己的需求对数组进行进一步的操作。
阅读全文