Seeking guidance on working with props in Vue JS. As a newcomer to Vue, I hope that my question is clear.
I've included my code snippet below, but it isn't functioning correctly due to missing Vue files.
In my attempt to use a prop created in the DiscountComponentShared.vue file, I want to utilize this prop within CartPage.vue to bind a 'disabled' class if the promo code input is clicked. My preference is to use @blur and @focus for binding my logic, but I'm uncertain how to do so. Currently, I have set it up with an @click event. When a user clicks on the input, it will display as disabled and apply the 'disabled' class.
//CartPage.vue
<input type="text" placeholder="Enter promo code here" @click="togglePromoCodeInput()" />
<app-one-discount :class="{'moreInfo': showMoreInfo, 'disabled': isDisabled}" :discount-list-disabled="isDisabled">
<template slot="moreInfoText">
Minimum purchase of $5. Valid for 3 orders.
Valid until 24 August 2018 Minimum purchase of $5.
</template>
<button class="moreInfoBtn font-italic font-12 text-teal mt-15" @click="toggleMoreInfo" slot="moreInfoBtn">{{ moreInfoBtn }}</button>
</app-one-discount>
<script lang="ts">
import {
Vue,
Component,
Prop
} from 'vue-property-decorator';
import OneDiscount from '../../components/shared/DiscountComponentShared.vue';
@Component({
components: {
appOneDiscount: OneDiscount
}
})
export default class CartPage extends Vue {
isDisabled: boolean = true;
togglePromoCodeInput() {
this.isDisabled = !this.isDisabled;
}
}
</script>
//DiscountComponentShared.vue
<template>
<div class="oneDiscount d-flex justify-content-between">
<div class="discountAmountBox d-flex align-items-center justify-content-center">
<p class="text-teal font-20">$50 OFF</p>
</div>
<div class="discountInfo d-flex align-items-center flex-wrap">
<div>
<p class="text-black font-18 font-weight-bold mb-5">Discount Name</p>
<div class="discountText text-black font-12">
<slot name="moreInfoText"></slot>
</div>
<slot name="moreInfoBtn"></slot>
</div>
</div>
</div>
</template>
<script lang="ts">
import {
Vue,
Component
} from 'vue-property-decorator';
@Component
export default class DiscountComponentShared extends Vue {
props!: {
discountListDisabled: {
type: Boolean,
default: false
}
}
}
</script>