[Vuejs]-Pass props from child component to Vue JS page and use @blur/@focus function to call on the prop inside the parent

by

0👍

I have fixed my own issue. Because I am using the vue-property-decorator, i need to call props as @prop()

i also used @focus and @blur events to call on the discDisabled data property.

thanks everyone for trying to assist me!

hope this helps someone in future.

//CartPage.vue
<input type="text" :placeholder="placeholder" @focus="promoInputFocused" @blur="promoInputBlurred" class="discountInput w-100 font-16 font-weight-light text-grey86 mb-20" v-model="hasDiscountCode" />

<one-discount :class="{'moreInfo': showMoreInfo, 'active': discount[key]}" :isDisabled="discDisabled">
  <template slot="discountName">{{discount.name}}</template>

  <template slot="moreInfoText">{{ discount.description }}</template>

  <button class="moreInfoBtn font-italic font-12 text-teal mt-15" @click="toggleMoreInfo" slot="moreInfoBtn">{{ discount.moreInfoBtn }}</button>
</one-discount>

<script lang="ts">
  import {
    Vue,
    Component
  } from 'vue-property-decorator';
  import OneDiscount from '../../components/shared/DiscountComponentShared.vue';

  @Component({
    components: {
      appOneDiscount: OneDiscount
    }
  })

  export default class CartPage extends Vue {
    placeholder: string = 'Enter promo code here';
    discDisabled: boolean = false;

    promoInputFocused() {
      this.placeholder = '';

      this.discDisabled = true;
    }

    promoInputBlurred() {
      this.placeholder = 'Enter promo code here';

      this.discDisabled = false;
    }
  }
</script>

//DiscountComponentShared.vue
<template>
        <div class="oneDiscount d-flex justify-content-between" :class="{'disabled': isDisabled}">
            <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,
    Prop
  } from 'vue-property-decorator';

  @Component
  export default class DiscountComponentShared extends Vue {
    @Prop({
      default: false
    }) isDisabled!: Boolean
  }
</script>
👤Jessica

Leave a comment