Laravel und vue.js Vorlage: javascript als wörtliche behandelt statt

Question

ausgeführt wird, habe ich eine home.blade.php die

@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 

Dies ist der relevante Teil der home.js mit

endet

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

Und das ist meine Mix Konfigurationsdatei

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

Das Problem ist, dass Vue-Vorlagen gerendert wird, aber die Quelle des Bildes bleibt das Text-JavaScript. Dies ist der erzeugte 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] ... 

Was mache ich falsch?

als Referenz, ist dies die home.js nach Mixdatei wie vom Browser geladen

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 " 
}); 

Die Vorlage selbst funktioniert, weil die for-Schleife erzeugt 3 Rutschen.

Aber warum das innere Javascript nicht ausgeführt wird?

Gibt es einen bestimmten Vue-Weg, den ich eigentlich noch nicht kenne?

Answer 1

dieses Bild 2 Modifikationen gemacht, und arbeitet jetzt:

diese 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 

und das ist 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> 
    ` 
});