0

I have a laravel-vuejs mix project and uses inline template. My blade elements are js dependent(e.g. dropdowns, sliders).

THe problem is that, when I apply any vue directives, the js dependent elements are not working properly because the vue component gets loaded first before the js scripts.

My question is, is it possible to load the js first and then the vue component?

Issue snippet : enter image description here

modi
  • 297
  • 2
  • 3
  • 15
  • sorry finding it hard to follow. Vue is JS. so are you saying that your inline templates are not rendering? or are you using vanilla js to target vue components? if so why? why not do it inside of the vue component. – Michael Mano Feb 11 '21 at 06:16
  • No,the inline-templates are rendering, but the elements with classess that have been manipulated by a vanilla js functions such as dropdowns, modals, etc., does not work when I enclose it with vue directives like v-for. thus, resulted to dropdowns, modals, showing by default. I edited the question and posted an image of the rendered template. – modi Feb 11 '21 at 06:50
  • Are you using jQuery? For these dropdown, modals, etc? – Vladislav Ladicky Feb 11 '21 at 07:42
  • @VladislavLadicky No, pure javascript – modi Feb 11 '21 at 08:35
  • 1
    The below answer is correct, But you should really try to stay away from manipulating the dom with external JS when using vue. Vue will have no idea about whats going on inside itself. its really bad practice. you can easily make a drop down using a click down toggle. – Michael Mano Feb 12 '21 at 01:07
  • @MichaelMano agreed – modi Feb 12 '21 at 05:37

0 Answers0