event handling - dynamic props with teleport modal vuejs3

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
  },