如何解决带有传送模态 vuejs3 的动态道具
我有一个带有子组件和道具的视图,在单击 tr 时我们显示具有不同值的模式,因此在单击 TR 选项卡后设置的属性不同
<template>
<ModalOrderDetail :display="modal_display" :id_order="order_id"/>
<div>
<table class="table table-striped">
<thead class="table-dark">
<tr>
<th scope="col">ID</th>
</tr>
</thead>
<tbody>
<tr
v-for="order in result.orders"
:key="order.id"
@click="
$emit('update:id_order',order.id)
showModal()
"
>
<th scope="row">{{ order.id }}</th>
</tr>
</tbody>
</table>
</div>
<script>
import ModalOrderDetail from '@/components/ModalOrderDetail.vue'
import OrderService from '@/services/OrderService.js'
export default {
components: {
ModalOrderDetail
},props: {
id_order: {
type: Number,required: true
}
},data() {
return {
result: [],customer: null,modal_display: true,order_id:null
}
},methods: {
showModal() {
console.log(this.modal_display)
console.log(this.order_id)
}
},created() {
OrderService.getorders()
.then(response => {
this.result = response.data
console.debug(this.result.orders)
})
.catch(error => {
console.log(error)
})
}
}
这里是模态
<template>
<teleport v-if="display" to="#modals">
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
</div>
<div class="modal-body">
<p>Commande N°</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button
type="button"
class="btn btn-secondary"
@click="display = !display"
>
Close
</button>
</div>
</div>
</div>
</div>
</teleport>
</template>
<script>
export default {
name: 'ModalOrderDetail',props: {
display: {
type: Boolean,required: true
},id_order: {
type: Number,required: true
}
},methods: {
print() {
console.log(this.id_order)
console.log(this.display)
}
}
}
</script>
<style scoped>
.modal {
display: block;
position: absolute;
}
</style>
问题我有一个突变道具错误,我真的不知道如何将动态道具传递给我的模态并使其正常工作?
解决方法
在模态分量替换 @click="display = !display"
通过发射一个事件 @click="$emit('close')"
和附加close
到emits
选项
export default {
name: 'ModalOrderDetail',emits: ['close'],props: {
displat: {
type: Boolean,required: true
},
然后在父组件做:
<ModalOrderDetail @close="modal_display=!modal_display" :display="modal_display" :id_order="order_id"/>
但是,我建议使用v-model
,而不是使用发射事件和道具:
<ModalOrderDetail v-model="modal_display" :id_order="order_id"/>
的 display
丙改变为modelValue
:
<button type="button" class="btn btn-secondary" @click="$emit('update:modelValue',!modelValue)" >
...
export default {
name: 'ModalOrderDetail',emits: ['update:modelValue'],props: {
modelValue: {
type: Boolean,
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。