I have a default Laravel installation where I want to execute jQuery's ready function. In general, Laravel bundle comes with WebPack & Mix which reads the BootStrap JS file to load jQuery bundle. Since jQuery is already loaded, I don't want to make another call in Blade Views but I don't know where I am going wrong. I have changed the JS file to be loaded before I execute ready function and tried using Vue's ready function. Can you please let me know what corrections should be done.
My app.js file and Blade View
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app',
ready: function(){
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
@yield('header')
<!-- Bootstrap core JavaScript -->
<script src=""></script>
<script>
$(document).ready(function () {
alert("jQuery loaded");
});
</script>
</head>
<body id="app">
@yield('navigation')
<!-- Page Content -->
<div class="container">
<div class="row">
@yield('content')
@yield('pagination')
@yield('sidebar')
</div>
</div>
<!-- /.container -->
@yield('footer')
</body>
</html>
I am using Default Laravel bootstrap Js file but I have slightly changed webpack file.
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js([
'node_modules/jquery/dist/jquery.min.js',
'node_modules/http://ift.tt/2f08AAu',
'node_modules/bootstrap/dist/js/bootstrap.js',
'resources/assets/js/app.js',
], 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css/app.css')
.sass('resources/assets/sass/custom.scss', 'public/css/custom.css');
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire