Is there a way to pass the image url to this vue component? I am moving the code to a separate php file that will contain the <script> tag used by Vue, but it seems like it won't recognize the passed data from a parent component.
Vue.component('theme-parallax',{
template: '#parallax-tpl',
data(){
return{
pageData: []
}
}
});
Component markup
NB: the page.embedded.parallax_image will work correctly in the parent component. As I am new to this, I am currently using a method in the parent component to obtain the data. I would appreciate any guidance on how to pass data from the main vue instance to all components.
<script type="text/x-template" id="parallax-tpl">
<div class="row m-0">
<div class="col-sm-12 col-md-12 col-lg-12 col-parallax p-0" v-prlx.background="{ speed: 0.08 }" :style="{ height: '70vh', backgroundImage: 'url('+page.embedded.parallax_image+')', backgroundSize: 'cover' }"></div>
</div>
</script>
This is how I'm implementing the component
<script type="text/x-template" id="home-tpl">
<div class="container-fluid p-0">
<div class="row m-0" v-for="page in pageData">
<div class="col-sm-12 col-md-12 col-lg-12 p-0" v-if="page.embedded.primary_featured_image">
<img class="img-fluid w-100" :src="page.embedded.primary_featured_image">
</div>
<div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5">
<h1>{{ page.title.rendered }}</h1>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5" v-html="page.content.rendered"></div>
</div>
<theme-section data-section="about" data-section-align="left"></theme-section>
<theme-parallax v-for="page in pageData" ></theme-parallax>
<theme-section data-section="office" data-section-align="right"></theme-section>
</div> <!-- end container-fluid -->
</script>