javascript - VueJS - 模态组件内的表单模板
问题描述
我正在尝试在模式中呈现模板,但很难理解如何将变量传递给子模板:
这是应用程序的主要 HTML:
<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>
以及相应的 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>
TypeError: "errors is undefined"
但是当模态打开时我得到了。
如何解决这个问题?
解决方案
您需要更改<movie-form></movie-form>
为<movie-form :errors="errors" :movie="movie"></movie-form>
. 道具需要从父组件传递到子组件。
推荐阅读
- angular - 根据当前会话值将登录/退出按钮添加到侧边栏
- mysql - 具有两个父级的 MySQL 表 - 在行删除期间,删除不会级联 - Google Cloud SQL
- reactjs - 在组件中设置类型?
- javascript - 设置复选框列表的样式
- python - 如何修复“ValueError:提供的数据在使用特征大小 17721 进行训练时具有 1 个维度”使用 sklearn LDA 模型进行预测
- milo - 有人检查在 kubernetes 环境中工作的 milo 服务器上的订阅行为吗?
- c# - 动态添加条件,无需每次都重新部署
- wordpress - $wpdb->insert 一次添加 3 行
- python - 为什么我的 contextProcessor 不适用于所有模板?django 2.2.1
- amazon-web-services - Amazon Elasticsearch - 无法访问 Kibana