mardi 4 juillet 2017

Laravel and vue.js template: javascript handled as literal instead of being executed

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