Vue.js make element invisible like selector?

Question

JavaScript

The dredge script works, everything works fine on jquery. Engaged in integration on Vue.js, now the element cannot be selected.

Here:

<li class="drag-item"  v-for="module in modules">
      все что в цикле Vue.js я не могу инициализировать, этот li НЕ drugable()
 </li>
<li class="drag-item">
       а если инициализировать вот так просто, без цикла, все работает отлично
 </li>

AT

<script>
        // draggable fucntion, we can use wverywhere
        $.fn.draggable = function () {
         // код функции
        }
    </script>

In app.js which is in the footer. So when npm run watch compiles, everything is assembled and shoved into court just like our layout.js.
In layout.js where the initialization of such functions usually takes place:

init(){
                //dragalbe item initializing
                $('.drag-item').draggable();

                $('.editable').each(function () {
                    $(this).editable();
                });

                $('.summernote').summernote();

In theory, the function is written in the header, initialized in the footer on DOM.ready, what could I have missed?

Experts Vue.js, please tell me why? How to fix?

Answer 1

The most obvious thing is that you are trying to initialize the script before the required elements appear in the DOM. Do you have any idea how exactly vue works, especially in the area of ​​templating?