vue-dragula
vue-dragula copied to clipboard
Failed to resolve directive: dragula - 2.2.4
Just tested a basic setup with vue 2.2.4 and webpack and gives me failed to resolve directive. Is this supported in 2.2.4 or am I missing something? Thanks
<template>
<div>
<div class="wrapper">
<div class="container" v-dragula="colOne" bag="first-bag">
<div v-for="text in colOne" :key="text">{{text}}</div>
</div>
<div class="container" v-dragula="colTwo" bag="first-bag">
<div v-for="text in colTwo" :key="text">{{text}}</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'Vue'
import VueDragula from 'vue-dragula'
Vue.use(VueDragula)
export default {
name: 'index',
data: () => {
return {
colOne: [
'You can move these elements between these two containers',
'Moving them anywhere else isn"t quite possible',
'There"s also the possibility of moving elements around in the same container, changing their position'
],
colTwo: [
'This is the default use case. You only need to specify the containers you want to use',
'More interactive use cases lie ahead',
'Another message'
],
categories: [
[1, 2, 3],
[4, 5, 6]
],
copyOne: [
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
'Aenean commodo ligula eget dolor. Aenean massa.'
],
copyTwo: [
'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
'Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.'
]
}
},
created: function () {
Vue.vueDragula.options('third-bag', {
copy: true
})
},
ready: function () {
var _this = this
Vue.vueDragula.eventBus.$on(
'drop',
function (args) {
console.log('drop: ' + args[0])
console.log(_this.categories)
}
)
Vue.vueDragula.eventBus.$on(
'dropModel',
function (args) {
console.log('dropModel: ' + args)
console.log(_this.categories)
}
)
}
}
</script>
It's not ready for vue 2.2 yet.
How about now?