Question

我的 home.blade.php 以

结尾

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

这是 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="{{ slider_base_img_url + '0' + n + '.png' }}"
            />
            </slide>
        </carousel>
    `
});

这是我的混合配置文件

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();

问题在于渲染了vue模板，但图像的src仍然是文本javascript。这是生成的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="{{ slider_base_img_url + '0' + n + '.png' }}" class="autosize"></div>

... [cut] ...

我做错了什么？

作为参考，这是从浏览器加载的 home.js文件后混合

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=\"{{ slider_base_img_url + '0' + n + '.png' }}\"\n                />\n            </slide>\n        </carousel>\n    "
});

模板本身正常工作，因为for循环创建了3张幻灯片。

但为什么内部javascript没有被执行？

是否有一种特定的Vue方式，实际上我还不知道呢？

Answer 1

完成了这两项修改，现在有效：

这个在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

这是 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>
    `
});

Laravel和vue.js模板：javascript被处理为文字而不是被执行

1 个答案: