Whenever I try to pass my prop to a component, I encounter an error message. The prop in question is used to display a button element in the payment section. However, there are certain components where this button should not be displayed. Unfortunately, when I pass the prop, all components using the button end up hidden. Below is the code snippet for the parent component. My issue is similar to the one discussed in this thread, but the solution provided doesn't seem to work for me.
<payment :sharedButton="false"><payment>
This is the button code in my payment.vue file
<div class="col-lg-auto" v-if="unpaid.qr_code === 1 && sharedButton === true">
<q-btn glossy
size="md"
:label="$t('Common.GetQrCode.Button')"
@click="makePayment(unpaidIndex, true)" color="positive"
>
</q-btn>
</div>
export default{
props: {
sharedButton: {
type: Boolean,
default: true
},
Here is the logic: hide the button when sharedButton is false, and show it when sharedButton is true.
Expected Result: Button should be hidden in certain components.
Current Result: All components with the button are hidden, and I am trying to avoid directly mutating props.