I have a main component containing code and tables, including a modal that is displayed based on a boolean value.
The main component features the following modal:
<ConfirmPaymentModal
ref="confirmPaymentModal"
:invoice="markAsPaidInvoice"
:max-amount="maxAmount"
:is-dialog-visible="markAsPaidVisible"
@update:is-dialog-visible="markAsPaidVisible = $event"
@submit="markAsPaidModal(markAsPaidInvoice.id, $event, false )"
/>
This is how I've set up the ConfirmPaymentModal:
<script setup>
import { formatThousands } from '@layouts/utils'
const props = defineProps({
isDialogVisible: {
type: Boolean,
required: true,
},
invoice : {
type: Object,
required: true,
},
maxAmount : {
type: Number,
required: true,
},
})
const emit = defineEmits([
'submit',
'update:isDialogVisible',
])
const totalAmount = ref(props.invoice.total_amount)
</script>
The goal is to set a maximum value for :
<VTextField
v-model="props.invoice.total_amount"
type="number"
density="compact"
:label="'Total ' + props.invoice.currency"
/>
I initially attempted to achieve this within a watcher:
watch(() => props.invoice.total_amount, newValue => {
if (newValue > props.maxAmount) {
props.invoice.total_amount = props.maxAmount
}
})
However, I am consistently encountering an issue where totalAmount is undefined. I believe I need to clone the value because I cannot directly modify props.invoice.total_amount. Can anyone provide guidance on how to properly handle this?
Thank you!
Note: Although my solution eventually worked, I'm questioning whether it's appropriate to change prop values. Am I mistaken in thinking so?