Struggling to include a template in a modal and unsure how to pass variables to the child template:
Below is the main HTML for the application:
<div id="example" class="container">
<button
class="btn btn-primary"
type="button"
@click="showModal = !showModal"
@keyup.esc="showModal = false"
>Show modal</button>
<!-- Modal-->
<transition
@enter="startTransitionModal"
@after-enter="endTransitionModal"
@before-leave="endTransitionModal"
@after-leave="startTransitionModal"
>
<div class="modal fade" v-if="showModal" ref="modal" @click.self="showModal = false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Select Movie</h5>
<button class="close" type="button" @click="showModal = false">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<movie-form></movie-form>
</div>
</div>
</div>
</div>
</transition>
<div class="modal-backdrop fade d-none" ref="backdrop"></div>
</div>
Also, here is the corresponding JavaScript:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
Vue.component('movie-form', {
props: ['errors', 'movie'],
template:
`<div>
<form
id="modal-form"
@submit="checkForm"
action="."
method="post"
>
<ul v-if="errors.length">
<li v-for="error in errors">
{{ error }}
</li>
</ul>
<div class="form-group">
<label for="exampleFormControlSelect1">Select movie/label>
<select
class="form-control"
id="movie"
v-model="movie"
name="movie"
>
<option>Star Wars</option>
<option>Vanilla Sky</option>
<option>Atomic Blonde</option>
</select>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" @click="showModal = false">Close</button>
<input
class="btn btn-primary"
type="submit"
value="Submit"
>
</div>
</form>
</div>`,
methods: {
checkForm: function(e) {
if (this.movie && this.desc) {
return true
}
this.errors = []
if (!this.movie) {
this.errors.push('Movie is required.')
}
e.preventDefault()
},
},
})
var vm = new Vue({
el: '#example',
data: {
showModal: false,
errors: [],
movie: '',
},
methods: {
startTransitionModal() {
vm.$refs.backdrop.classList.toggle('d-block')
vm.$refs.modal.classList.toggle('d-block')
},
endTransitionModal() {
vm.$refs.backdrop.classList.toggle('show')
vm.$refs.modal.classList.toggle('show')
},
},
})
</script>
Encountering a TypeError: "errors is undefined" error when opening the modal. How can this be resolved?