Problem script <script src="{{asset('js/app.js')}}"defer></script>

Limbaje de Programare JavaScript / Node
1

Salut,

Lucrez la un proiect in Laravel & Vue si intampin o problema legata de acest script. Am fisierul footer care e inclus in toate fisierele din proiect. Aici am scriptul din titlul + altele:

   
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>window.jQuery || document.write('<script src="src/js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
        <script src="{{asset('template/plugins/popper.js/dist/umd/popper.min.js')}}"></script>
        <script src="{{asset('template/plugins/bootstrap/dist/js/bootstrap.min.js')}}"></script>
        <script src="{{asset('template/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js')}}"></script>
        <script src="{{asset('template/plugins/screenfull/dist/screenfull.js')}}"></script>
        <script src="{{asset('template/plugins/datatables.net/js/jquery.dataTables.min.js')}}"></script>
        <script src="{{asset('template/plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
        <script src="{{asset('template/plugins/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
        <script src="{{asset('template/plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>
        <script src="{{asset('template/plugins/jvectormap/jquery-jvectormap.min.js')}}"></script>
        <script src="{{asset('template/plugins/jvectormap/tests/assets/jquery-jvectormap-world-mill-en.js')}}"></script>
        <script src="{{asset('template/plugins/moment/moment.js')}}"></script>
        <script src="{{asset('template/plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js')}}"></script>
        <script src="{{asset('template/plugins/d3/dist/d3.min.js')}}"></script>
        <script src="{{asset('template/plugins/c3/c3.min.js')}}"></script>
        <script src="{{asset('template/js/tables.js')}}"></script>
        <script src="{{asset('template/js/widgets.js')}}"></script>
        <script src="{{asset('template/js/charts.js')}}"></script>
        <script src="{{asset('template/dist/js/theme.min.js')}}"></script>
        <script src="{{asset('js/app.js')}}"defer></script>
        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script type="text/javascript">
            $(document).ready(function(){
                $("#datepicker").datetimepicker({
                    format: 'YYYY-MM-DD'
                })
            })
        </script>

Problema e ca daca sterg acest script cu defer, nu-mi mai functioneaza fisierul cu codul Vue, iar daca il las imi functioneaza fisierul Vue, dar nu-mi mai functioneaza scriptul cu datepicker, ultimul script din cod. Care e problema? As fi recunoscator daca m-ati putea ajuta.

2

Urâtă combinație, încearcă să folosești doar Vue cu webpack și npm :smiley:

Poți pune script-ul de jquery in codul de vue cred.

3 Likes
3

Am încercat, tot nu funcținează…

4

Unde este plugin-ul (script-ul) datetimepicker ? Nu-l văd încărcat.

1 Like
5

As crede ca nu e mounted in DOM elementul respectiv (cu id datepicker).

Formateaza-l doar acolo unde e in codul de Vue.js, dupa ce stii sigur ca exista, nu cu scripturi pe window.

Also, nu stiu Vue.js in mod specific (dar lucrez cu alte frameworkuri similare de ani buni), sunt pretty sure ca e un bad practice sa incerci sa faci mutations direct pe elementul de dom, cat timp logica respectiva ar trebui sa fie in aplicatia de Vue.

Adica, ce as face eu, in codul de Vue.js, unde primesti contentul respectiv, as formata data respectiva inainte de a-i face render, nu as chema vreo metoda pe elementul din dom (in opinia mea, nici nu iti trebuie jQuery, sunt metode native in vanilla JS, sau librarii specifice, gen moment.js sau date-fns).

1 Like
6

Tu incerci sa folosesti o thema de jquery peste care sa pui vue? Ori renunti la vue si mergi pe jquery ori cauti alta tema facuta in vuejs.

3 Likes
7

Am rezolvat. Am pastrat doar Vue…Se poate inchide
Multumesc tuturor!