Vue可拖动以跟随v芯片组选择。
Vue可拖动以跟随v芯片组选择。
提问于 2020-04-07 15:43:07
我正在使用Vue draggable来改变我的v芯片的位置。当您单击某个芯片时，该芯片显示为Active，并与其索引绑定到selection。问题是，当拖动芯片并更改其位置时，它不会更新selection索引。
我怎样才能确保其中一个跟着另一个呢？
<v-chip-group
v-model="selection"
active-class="primary--text"
column
>
<draggable v-model="items" @start="drag=true" @end="drag=false">
<v-chip v-for="(item, i) in items" :key="i"
close
draggable>
{{item.name}}
</v-chip>
</draggable>
</v-chip-group>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-07 17:36:57
可以在可拖放组件中使用@start和@end事件设置选择索引。
下面是工作代码：https://codepen.io/chansv/pen/zYvOYyd?editors=1010
在这里找到工作代码：
<div id="app">
<v-app id="inspire">
<v-card
max-width="400"
class="mx-auto"
>
<v-card-text>
<v-chip-group
v-model="selection"
column
active-class="primary--text"
>
<draggable v-model="tags" @start="dragStart" @end="dragEnd">
<v-chip v-for="(tag, i) in tags" :key="i" draggable>
{{ tag.name }}
</v-chip>
</draggable>
</v-chip-group>
</v-card-text>
</v-card>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
selection: null,
currentTag: null,
tags: [{
name: 'Shoping',
},{
name: 'Art',
}, {
name: 'Tech',
}, {
name: 'Creative Writing'
}
],
}),
methods: {
dragStart() {
if (this.tags[this.selection]) this.currentTag = this.tags[this.selection].name;
else this.currentTag = null;
},
dragEnd() {
var self = this;
if (this.currentTag) {
this.tags.forEach((x, i) => {
if (x.name === self.currentTag) self.selection = i;
});
}
}
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61083916
复制相关文章
相似问题
腾讯云开发者
