dynamic props with teleport modal vuejs3 - event-handling

Question

I have a view with a child component and props, on a tr click we display modal with different values, so the properties set is different following the TR tab clicked
<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)
})
}
}
and here the modal
<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>
problem i have a mutation props error, i really don't know how to pass dynamic props to my modal and make it work properly ?

Answer 1

In modal component replace #click="display = !display" by emitting an event #click="$emit('close')"
and add close to emits option
export default {
name: 'ModalOrderDetail',
emits: ['close'],
props: {
displat: {
type: Boolean,
required: true
},
then in parent component do :
<ModalOrderDetail #close="modal_display=!modal_display" :display="modal_display" :id_order="order_id"/>
But I recommend to use v-model instead of using emitted event and a prop :
<ModalOrderDetail v-model="modal_display" :id_order="order_id"/>
change the display prop to modelValue :
<button type="button" class="btn btn-secondary" #click="$emit('update:modelValue', !modelValue)" >
...
export default {
name: 'ModalOrderDetail',
emits: ['update:modelValue'],
props: {
modelValue: {
type: Boolean,
required: true
},