Aleksandr Shelestov

Joined

40 Experience
0 Lessons Completed
0 Questions Solved

Activity

Posted in Vue.js Components in Rails Views Discussion

Unfortunately, this cool method is not a better way to include components to an existing layout.

First of all, VUE will parse all the page, starting from data-behaviour="vue". So it could be a really hard load.

The second, parsing the page rewrites the DOM. So all your other non VUE stuff and events won't work anymore (like jQuery or Bootstrap plugins, etc.) Or they must be initialized after VUE did its job.

So it could be a trick to make them work together.

You think using both variable wordings underscore and camelcase is good? :)

Hm, that's cool, until you need to validate the form and show and handle all these nested validation errors. It requires much more efforts than the Rails nested_attributes.

And, as I see, Turbolinks doesn't allow you reuse the VUE form when you click the back button in browser, even if you use this TurbolinksVUE library. The form will be activated just once by VueJS, when the page was loaded. Check this out :)

It still doesn't work in some cases. I did the same and tried to go 'home' and back and I caught errors like:

[Vue warn]: Error in destroyed hook: "NoModificationAllowedError: Failed to set the 'outerHTML' property on 'Element': This element has no parent node."

or

DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node.

logo Created with Sketch.

Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

© 2020 GoRails, LLC. All rights reserved.