Optimizing your App and Using Components to Display Data Chapter 3</button>
</div>
</div>
</div>
</div>`,props: {
visible: {
type: Boolean,
default: false
}
}
});We will be using the visible prop to determine whether the modal window is open or not.
Add a v-show attribute to your outer container that accepts the visible variable:
Vue.component('modal-window', {
template: `<div class="modal fade" v-
show="visible">
...
</div>`,props: {
visible: {
type: Boolean,
default: false
}
}
});Add your modal-window component to the app, specifying visible to be true for now,
so we can understand and see what is going on:
<modal-window :visible="true"></modal-window>We now need to pass some data to our modal box. Add a heading and some paragraphs
between the two tags:
<modal-window :visible="true">
<h1>Modal Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse ut rutrum ante, a
ultrices felis. Quisque sodales diam non mi
blandit dapibus. </p>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse ut rutrum ante, a
ultrices felis. Quisque sodales diam non mi