Pass props from child component to Vue JS page and use @blur/@focus function to call on the prop inside the...

looking for some assistance regarding props in Vue JS. I'm quite new to Vue so hopefully I make myself clear in my question.

I've added my code in the snippet below but it does not work because I haven't added the necessary Vue files.

I'm attempting to use a prop that has been created in the DiscountComponentShared.vue file and I would like to use this prop inside the CartPage.vue to bind a class of 'disabled' if the promo code input is clicked on. I would rather like to use @blur and @focus to bind my logic but am unsure how. So currently I hooked it up with an @click. So when a user clicks on the input it will tell that it is disabled and bind the classs 'disabled'.

//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>

edited Nov 23 '18 at 9:27

Sumurai8

13.8k83564

asked Nov 23 '18 at 6:44

Jessica

367

Not sure I understand. You want the appOneDiscount component to not be shown if someone enters a promo code in the input at the top of CartPage.vue?

– Andrew1325
Nov 23 '18 at 7:08

@Andrew1325 Hi Andrew, no i would still like the appOneDiscount to be shown but i would like to bind the 'disabled' class to it so i can style the appOneDiscount component to become greyed out

– Jessica
Nov 23 '18 at 7:34

1

it looks ok, so what do you need props for?

– Efrat
Nov 23 '18 at 8:32

Props only work downwards. In the code you shared, the cart is the parent of the discount component, so cart can share data with the discount component. If you want to share information back from the discount component to the cart component you have to use events. To be honest though, you may be better off using a Vuex store. As for the question: You don't seem to use discountListDisabled in your discount component. The cart component defines isDisabled differently from what I am used to, but this may be a typescript thing. Other than that I would expect discountListDisabled to be a bool

– Sumurai8
Nov 23 '18 at 9:45

add a comment |

looking for some assistance regarding props in Vue JS. I'm quite new to Vue so hopefully I make myself clear in my question.

I've added my code in the snippet below but it does not work because I haven't added the necessary Vue files.

//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>

edited Nov 23 '18 at 9:27

Sumurai8

13.8k83564

asked Nov 23 '18 at 6:44

Jessica

367

Not sure I understand. You want the appOneDiscount component to not be shown if someone enters a promo code in the input at the top of CartPage.vue?

– Andrew1325
Nov 23 '18 at 7:08

@Andrew1325 Hi Andrew, no i would still like the appOneDiscount to be shown but i would like to bind the 'disabled' class to it so i can style the appOneDiscount component to become greyed out

– Jessica
Nov 23 '18 at 7:34

1

it looks ok, so what do you need props for?

– Efrat
Nov 23 '18 at 8:32

Props only work downwards. In the code you shared, the cart is the parent of the discount component, so cart can share data with the discount component. If you want to share information back from the discount component to the cart component you have to use events. To be honest though, you may be better off using a Vuex store. As for the question: You don't seem to use discountListDisabled in your discount component. The cart component defines isDisabled differently from what I am used to, but this may be a typescript thing. Other than that I would expect discountListDisabled to be a bool

– Sumurai8
Nov 23 '18 at 9:45

add a comment |

looking for some assistance regarding props in Vue JS. I'm quite new to Vue so hopefully I make myself clear in my question.

I've added my code in the snippet below but it does not work because I haven't added the necessary Vue files.

//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>

edited Nov 23 '18 at 9:27

Sumurai8

13.8k83564

asked Nov 23 '18 at 6:44

Jessica

367

looking for some assistance regarding props in Vue JS. I'm quite new to Vue so hopefully I make myself clear in my question.

I've added my code in the snippet below but it does not work because I haven't added the necessary Vue files.

//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>

//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>

//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>

typescript vue.js

edited Nov 23 '18 at 9:27

Sumurai8

13.8k83564

asked Nov 23 '18 at 6:44

Jessica

367

edited Nov 23 '18 at 9:27

Sumurai8

13.8k83564

asked Nov 23 '18 at 6:44

Jessica

367

edited Nov 23 '18 at 9:27

Sumurai8

13.8k83564

edited Nov 23 '18 at 9:27

Sumurai8

13.8k83564

edited Nov 23 '18 at 9:27

Sumurai8

13.8k83564

asked Nov 23 '18 at 6:44

Jessica

367

asked Nov 23 '18 at 6:44

Jessica

367

asked Nov 23 '18 at 6:44

Jessica

367

Not sure I understand. You want the appOneDiscount component to not be shown if someone enters a promo code in the input at the top of CartPage.vue?

– Andrew1325
Nov 23 '18 at 7:08

@Andrew1325 Hi Andrew, no i would still like the appOneDiscount to be shown but i would like to bind the 'disabled' class to it so i can style the appOneDiscount component to become greyed out

– Jessica
Nov 23 '18 at 7:34

1

it looks ok, so what do you need props for?

– Efrat
Nov 23 '18 at 8:32

Props only work downwards. In the code you shared, the cart is the parent of the discount component, so cart can share data with the discount component. If you want to share information back from the discount component to the cart component you have to use events. To be honest though, you may be better off using a Vuex store. As for the question: You don't seem to use discountListDisabled in your discount component. The cart component defines isDisabled differently from what I am used to, but this may be a typescript thing. Other than that I would expect discountListDisabled to be a bool

– Sumurai8
Nov 23 '18 at 9:45

add a comment |

Not sure I understand. You want the appOneDiscount component to not be shown if someone enters a promo code in the input at the top of CartPage.vue?

– Andrew1325
Nov 23 '18 at 7:08

@Andrew1325 Hi Andrew, no i would still like the appOneDiscount to be shown but i would like to bind the 'disabled' class to it so i can style the appOneDiscount component to become greyed out

– Jessica
Nov 23 '18 at 7:34

1

it looks ok, so what do you need props for?

– Efrat
Nov 23 '18 at 8:32

Props only work downwards. In the code you shared, the cart is the parent of the discount component, so cart can share data with the discount component. If you want to share information back from the discount component to the cart component you have to use events. To be honest though, you may be better off using a Vuex store. As for the question: You don't seem to use discountListDisabled in your discount component. The cart component defines isDisabled differently from what I am used to, but this may be a typescript thing. Other than that I would expect discountListDisabled to be a bool

– Sumurai8
Nov 23 '18 at 9:45

Not sure I understand. You want the appOneDiscount component to not be shown if someone enters a promo code in the input at the top of CartPage.vue?

– Andrew1325
Nov 23 '18 at 7:08

@Andrew1325 Hi Andrew, no i would still like the appOneDiscount to be shown but i would like to bind the 'disabled' class to it so i can style the appOneDiscount component to become greyed out

– Jessica
Nov 23 '18 at 7:34

it looks ok, so what do you need props for?

– Efrat
Nov 23 '18 at 8:32

Props only work downwards. In the code you shared, the cart is the parent of the discount component, so cart can share data with the discount component. If you want to share information back from the discount component to the cart component you have to use events. To be honest though, you may be better off using a Vuex store. As for the question: You don't seem to use discountListDisabled in your discount component. The cart component defines isDisabled differently from what I am used to, but this may be a typescript thing. Other than that I would expect discountListDisabled to be a bool

– Sumurai8
Nov 23 '18 at 9:45

add a comment |

1 Answer
1

active

oldest

votes

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>

answered Nov 27 '18 at 5:11

Jessica

367

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441807%2fpass-props-from-child-component-to-vue-js-page-and-use-blur-focus-function-to%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

answered Nov 27 '18 at 5:11

Jessica

367

add a comment |

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>

answered Nov 27 '18 at 5:11

Jessica

367

add a comment |

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>

answered Nov 27 '18 at 5:11

Jessica

367

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>

//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>

//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>

answered Nov 27 '18 at 5:11

Jessica

367

answered Nov 27 '18 at 5:11

Jessica

367

answered Nov 27 '18 at 5:11

Jessica

367

answered Nov 27 '18 at 5:11

Jessica

367

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk