compile errors on dev-server

[pepf]

When doing a clean install, npm run start results in a few errors along the lines of:

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-694d9b91!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/CustomModelManager.vue

  Vue template syntax error:

  tag <span> has no matching end tag.

Using vue@2.3.0 and vue-template-compiler@2.3.0, so this might be because of the updates in either of these packages. I have a PR in the make to fix this though :)

[kristianmandrup]

Yup, sounds like an upgrade issue. Thanks!

[caleywoods]

Ran into this same problem and manually corrected several instances of span and some h4 elements not having a matching end tag.

I noticed on Windows as well when I would load it up I was getting an error in the console about "_h is not a function" and complaining about the use of <md-toolbar> elements in App.vue. I did some googling and found several people mentioning vue-material and some other changes. I solved this by changing the package.json dependencies to "vue": "2.1.4" as well as the devDependencies to "vue-loader": "10.0.0" and adding "vue-template-compiler": "2.1.4"

After another npm install I was able to get the demo app working in Chrome on Windows 10. I'm honestly not all that familiar with the vue or modern JS toolchain, sorry if I've said something that doesn't add up as a result.

Here is what it looks now and seems to be working. Before making the changes above the cyan colored menu wouldn't render and none of the examples showed.

[kristianmandrup]

Thanks! I developed it for Vue 2.1. Didn't test it for later versions. Please make PR with fixes :)

[caleywoods]

@kristianmandrup I'm still pretty fresh at Vue, not quite comfortable enough yet with what I've done here to do a PR, I'm still noticing some issues on my local project where the elements do no stay where you put them when you release the mouse button.

I'm in the process of trying to implement this into a datatable component from the https://github.com/andrewcourtice/vuetiful project and running into the same issue.

I need to take a good read through the documentation to figure out what is what. I'm seeing the console talk about No matching model could be found for container and also the drake being undefined so I've got to sort through all that on my way.

[kristianmandrup]

@caleywoods I will try to fix the demo now for Vue 2.2+ and let you know...

[caleywoods]

@kristianmandrup Thank you. What I'm seeing locally with pulling the demo down and getting it to work is that trying to move elements around inside their own container will re-arrange the array but there seems to be an issue with it actually showing that move in the container itself, the item seems to return to its original position. This kind of "grows" as a problem because then when you grab the top most item and attempt to move it again you don't actually have ahold of the item that you think you do. I'll see if I can get video of this happening.

It happens on both the demo app I pulled down and also on a clean project I set up and pulled vue2-dragula into.

[kristianmandrup]

I just pushed update of demo to vue 2.3.2. I can see there seems to be an issue as well with the timemachine. I was hoping some devs from the community would continue my work. Just needs some more love (and testing/debugging). Cheers!

Thanks for sending a video. Feel free to attach it to the issue so others can see it as well and work from there...

[caleywoods]

I'll check out the update: here's a link to the video where I show that for some reason the draggable divs do not update along with the model.

https://youtu.be/eqHdTDa1QZg

I added numbers to the text items in colOne so we could more easily see that they don't match up.

[kristianmandrup]

You might also need to add key to lists as per new Vue requirements. Could be the problem (according to other previously reported issues)

[caleywoods]

@kristianmandrup I think you hit the nail on the head with the key thing. That isn't present in the demo code I have and adding it does fix the problem on the demo but doesn't seem to be working on this other project I am trying to setup which isn't quite as simple. I'll continue working on it.

[kristianmandrup]

kristianmandrup/vue2-dragula#12

He added a note on using :key to the Readme, having run into the same problem (since Vue 2.2 I believe). Let me know if that works!