使用antd-design-vue 模态框组件 使用v-model报错的问题
在封装模态框组件的时候,遇到一个问题,1、模态框的显示与隐藏是由父组件传递过来的visible控制,在模态框上使用默认的v-mode,使用计算属性缓存visible这个属性值,,当模态框组件改变了这个值,会报:[Vue warn]: Computed property “showModal” was assigned to but it has no setter.然后再设置set方法,会导致栈溢
·
在封装模态框组件的时候,遇到一个问题,
1、模态框的显示与隐藏是由父组件传递过来的visible控制,在模态框上使用默认的v-mode,使用计算属性缓存visible这个属性值,,当模态框组件改变了这个值,会报:[Vue warn]: Computed property “showModal” was assigned to but it has no setter.然后再设置set方法,会导致栈溢出。
<a-modal v-model="showModal"
:title="title"
okText="确定"
cancelText="取消"
@cancel="handleOk"
@ok="handleOk">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
<script>
props: {
visible: {
type: Boolean,
default: false
}
computed: {
showModal: {
get() {
return this.visible
},
set(val) {
this.showModal = val
}
}
}
</script>
2、当把属性值放到data中,也会有问题,模态框直接不显示了。
解决办法:
不在模态框组件上使用v-model,而是使用动态绑定的visible属性
<a-modal :visible="visible"
:title="title"
okText="确定"
cancelText="取消"
@cancel="handleOk"
@ok="handleOk">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
更多推荐
已为社区贡献2条内容
所有评论(0)