Here is an example of my Vue component:
<template>
<div id="modal-transaction" class="modal fade" tabindex="-1" role="dialog">
...
<div class="modal-header">
<h4 class="modal-title">{{order.number}}</h4>
</div>
...
</div>
</template>
<script>
export default {
...
data() {
return {
order: []
}
},
watch: {
orderDetail: {
handler() {
this.order = this.orderDetail
},
immediate: true
}
},
}
</script>
When the code runs, I encounter the following error message:
[Vue warn]: Error in render: "TypeError: Cannot read property 'number' of undefined"
To address this issue, I need to add a condition within the watch block. If this.orderDetail exists, then execute the corresponding HTML tag in the template. The current error arises due to the lack of such a condition. I am currently unsure how to implement this specific condition.
Any suggestions on how to resolve this problem would be greatly appreciated!