I've a home.blade.php that ends with
@section('page_specific_scripts')
<script type="text/javascript">
const slider_base_img_url = ''
</script>
<script src=""></script>
@endsection
This is the relevant part of home.js
Vue.component('slide', Vue.Slide);
Vue.component('carousel', Vue.Carousel);
const slider_app = new Vue({
el: '#home-page-slider',
template: `
<carousel :perPage="1" :autoplay="true" :autoplayLoop="true" >
<slide v-for="n in 3">
<IMG
class='autosize'
src=""
/>
</slide>
</carousel>
`
});
And this is my mix config file
mix
.js('resources/assets/js/home.js', 'public/js')
.js('resources/assets/js/app.js', 'public/js')
.extract(['vue', 'lodash', 'vue-resource', 'vue-carousel'])
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('node_modules/font-awesome/scss/font-awesome.scss', 'public/css/vendor')
.version();
The problem is that vue templates is rendered but the src of the image remain the textual javascript. This is the generated HTML
<div class="VueCarousel-inner" style="transform: translateX(-3806px); transition: transform 0.5s ease; flex-basis: 1903px; visibility: visible;">
<div class="VueCarousel-slide">
<img src="" class="autosize"></div>
... [cut] ...
What am I doing wrong?
For reference, this is the home.js file after mix as loaded from the browser
Vue.component('slide', Vue.Slide);
Vue.component('carousel', Vue.Carousel);
var slider_app = new Vue({
el: '#home-page-slider',
//language=HTML
template: "\n <carousel :perPage=\"1\" :autoplay=\"true\" :autoplayLoop=\"true\" >\n \n <slide v-for=\"n in 3\">\n <IMG\n class='autosize'\n src=\"\"\n />\n </slide>\n </carousel>\n "
});
The template itself is working, because the for loop creates 3 slides.
But why the inner javascript is not being executed?
Is there a specific Vue-way that actually I don't know yet?
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire