Pass props from child component to Vue JS page and use @blur/@focus function to call on the prop inside the...
1
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>typescript vue.js
edited Nov 23 '18 at 9:27
Sumurai8
13.8k83564
asked Nov 23 '18 at 6:44
JessicaJessica
367
add a comment |
1
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>typescript vue.js
edited Nov 23 '18 at 9:27
Sumurai8
13.8k83564
asked Nov 23 '18 at 6:44
JessicaJessica
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 usediscountListDisabledin your discount component. The cart component definesisDisableddifferently from what I am used to, but this may be a typescript thing. Other than that I would expectdiscountListDisabledto be a bool
– Sumurai8
Nov 23 '18 at 9:45
add a comment |
1
1
1
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>typescript vue.js
edited Nov 23 '18 at 9:27
Sumurai8
13.8k83564
asked Nov 23 '18 at 6:44
JessicaJessica
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.
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>//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
typescript vue.js
edited Nov 23 '18 at 9:27
Sumurai8
13.8k83564
asked Nov 23 '18 at 6:44
JessicaJessica
367
edited Nov 23 '18 at 9:27
Sumurai8
13.8k83564
asked Nov 23 '18 at 6:44
JessicaJessica
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
13.8k83564
asked Nov 23 '18 at 6:44
JessicaJessica
367
asked Nov 23 '18 at 6:44
JessicaJessica
367
asked Nov 23 '18 at 6:44
JessicaJessica
367
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 usediscountListDisabledin your discount component. The cart component definesisDisableddifferently from what I am used to, but this may be a typescript thing. Other than that I would expectdiscountListDisabledto 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 usediscountListDisabledin your discount component. The cart component definesisDisableddifferently from what I am used to, but this may be a typescript thing. Other than that I would expectdiscountListDisabledto 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
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
@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
1
it looks ok, so what do you need props for?
– Efrat
Nov 23 '18 at 8:32
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
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
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>answered Nov 27 '18 at 5:11
JessicaJessica
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Nov 27 '18 at 5:11
JessicaJessica
367
add a comment |
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>answered Nov 27 '18 at 5:11
JessicaJessica
367
add a comment |
0
0
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>answered Nov 27 '18 at 5:11
JessicaJessica
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
JessicaJessica
367
answered Nov 27 '18 at 5:11
JessicaJessica
367
answered Nov 27 '18 at 5:11
JessicaJessica
367
answered Nov 27 '18 at 5:11
JessicaJessica
367
367
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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
discountListDisabledin your discount component. The cart component definesisDisableddifferently from what I am used to, but this may be a typescript thing. Other than that I would expectdiscountListDisabledto be a bool– Sumurai8
Nov 23 '18 at 9:45