[Vuejs]-Laravel and vue.js template: javascript handled as literal instead of being executed

by

0👍

✅

done this 2 modifications, and now works:

this in home.blade.php

@section('page_specific_scripts')
    <script type="text/javascript">
        window.slider_base_img_url = '{{ $slider_base_img_url }}'
    </script>
    <script src="{{ mix('js/home.js') }}"></script>
@endsection

and this is home.js

const slider_app = new Vue({
    el: '#home-page-slider',
    //language=HTML
    computed: {
        slider_base_img_url: function () { return window.slider_base_img_url; }
    },
    template: `
        <carousel :perPage="1" :autoplay="true"  :autoplayLoop="true" >

            <slide v-for="n in 3" :key="n">
                <IMG
                    class='autosize'
                    :src="slider_base_img_url + '0' + n + '.png'"
                />
            </slide>
        </carousel>
    `
});

Leave a comment