Блог

У меня есть представление с дочерним компонентом и реквизитом, при щелчке 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,
   required: true
  },