如何解决添加拖放到vuetify的选择
我在Vuetify的数据表中找到了两个拖放示例,但是我无法使其与select组件一起使用。这是我正在尝试的:
<template>
<v-select
v-model="displayingRows"
:items="rowItems"
:menu-props="{ maxHeight: '400' }"
label="Select"
multiple
>
<Draggable v-model="displayingRows">
<template slot="selection" slot-scope="data">
<!-- HTML that describe how select should render selected items -->
{{ data.item.text }} - {{ data.item.value }}
</template>
<template slot="item" slot-scope="data">
<!-- HTML that describe how select should render items when the select is open -->
{{ data.item.text }}
</template>
</Draggable>
</v-select>
</template>
和js
<script>
import Draggable from 'vuedraggable'
export default {
components: {
Draggable
},data(){
return {
displayingRows: [],rowItems: [{text: 'orange',value: 1},{text: 'banana',value: 2},{text: 'peach',value: 3}]
}
}
}
</script>
拖放完全无效。谁能帮我弄清楚我在做什么错?
解决方法
我将可拖动的 v-autocomplete 代码制作为 jsfiddle。
-
v-select
系列有 #selection,它提供了像 v-for 一样的模板。 - 每个选择都是一个包含一个元素的列表。
- 因此,将所有列表设置为 id = index
- 当事件
:move
在<draggable>
中时,设置当前拖动元素的属性。 - 拖动时(
changed
),将当前元素插入到数组items
的精确索引处。 - 并删除旧的。
关键是...可拖动列表id
是items
的{{1}}。
下面的代码...
html 模板
index
js 脚本
<div data-app id="app">
<v-autocomplete
v-model="selectedSync"
:items="itemsSync"
chips
multiple
>
<template #selection="data">
<draggable
:id="data.index"
:list="selectedSync"
v-bind="dragOptionsChips"
:move="move"
@change="change"
>
<v-chip
draggable
v-model="selectedSync[data.index]"
:key="data.item"
@mousedown.stop
@click.stop
>
{{data.item}}
</v-chip>
</draggable>
</template>
</v-autocomplete>
</div>
,
尝试使用:
options="{group:'draggableGroup'}"
在每个可拖动项目上,如下所示:
Draggable v-model="displayingRows" :options="{group:'draggableGroup'}"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。