Reset a Vue counter component from the parent component
I have a Vue counter which counts up from 1 to 10. It's implemented as a component. I need to reset the counter from the main app. What's the best way to do this? As you can see from my example, the watch method doesn't do the job:
Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
TweenLite.to(this, 10, { age_now: this.$root.age_end, roundProps: "age_now", ease:Linear.easeNone });
},
watch: {
age(val) {
this.age_now = val;
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
age_end: 10
},
methods: {
reset() {
this.age = 1;
}
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter :age="age"></my-counter>
<button @click.prevent="reset">Reset</button>
<p>What's the best way to implement the reset of the component to restart the count up from 1 to 10?</p>
</div>See also on CodePen: https://codepen.io/MSCAU/pen/OagMJy
javascript vue.js vuejs2 gsap
edited Nov 15 '18 at 21:31
Boussadjra Brahim
6,2573631
asked Nov 15 '18 at 20:33
MSCMSC
1,69921627
add a comment |
I have a Vue counter which counts up from 1 to 10. It's implemented as a component. I need to reset the counter from the main app. What's the best way to do this? As you can see from my example, the watch method doesn't do the job:
Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
TweenLite.to(this, 10, { age_now: this.$root.age_end, roundProps: "age_now", ease:Linear.easeNone });
},
watch: {
age(val) {
this.age_now = val;
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
age_end: 10
},
methods: {
reset() {
this.age = 1;
}
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter :age="age"></my-counter>
<button @click.prevent="reset">Reset</button>
<p>What's the best way to implement the reset of the component to restart the count up from 1 to 10?</p>
</div>See also on CodePen: https://codepen.io/MSCAU/pen/OagMJy
javascript vue.js vuejs2 gsap
edited Nov 15 '18 at 21:31
Boussadjra Brahim
6,2573631
asked Nov 15 '18 at 20:33
MSCMSC
1,69921627
add a comment |
I have a Vue counter which counts up from 1 to 10. It's implemented as a component. I need to reset the counter from the main app. What's the best way to do this? As you can see from my example, the watch method doesn't do the job:
Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
TweenLite.to(this, 10, { age_now: this.$root.age_end, roundProps: "age_now", ease:Linear.easeNone });
},
watch: {
age(val) {
this.age_now = val;
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
age_end: 10
},
methods: {
reset() {
this.age = 1;
}
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter :age="age"></my-counter>
<button @click.prevent="reset">Reset</button>
<p>What's the best way to implement the reset of the component to restart the count up from 1 to 10?</p>
</div>See also on CodePen: https://codepen.io/MSCAU/pen/OagMJy
javascript vue.js vuejs2 gsap
edited Nov 15 '18 at 21:31
Boussadjra Brahim
6,2573631
asked Nov 15 '18 at 20:33
MSCMSC
1,69921627
I have a Vue counter which counts up from 1 to 10. It's implemented as a component. I need to reset the counter from the main app. What's the best way to do this? As you can see from my example, the watch method doesn't do the job:
Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
TweenLite.to(this, 10, { age_now: this.$root.age_end, roundProps: "age_now", ease:Linear.easeNone });
},
watch: {
age(val) {
this.age_now = val;
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
age_end: 10
},
methods: {
reset() {
this.age = 1;
}
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter :age="age"></my-counter>
<button @click.prevent="reset">Reset</button>
<p>What's the best way to implement the reset of the component to restart the count up from 1 to 10?</p>
</div>See also on CodePen: https://codepen.io/MSCAU/pen/OagMJy
Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
TweenLite.to(this, 10, { age_now: this.$root.age_end, roundProps: "age_now", ease:Linear.easeNone });
},
watch: {
age(val) {
this.age_now = val;
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
age_end: 10
},
methods: {
reset() {
this.age = 1;
}
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter :age="age"></my-counter>
<button @click.prevent="reset">Reset</button>
<p>What's the best way to implement the reset of the component to restart the count up from 1 to 10?</p>
</div>Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
TweenLite.to(this, 10, { age_now: this.$root.age_end, roundProps: "age_now", ease:Linear.easeNone });
},
watch: {
age(val) {
this.age_now = val;
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
age_end: 10
},
methods: {
reset() {
this.age = 1;
}
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter :age="age"></my-counter>
<button @click.prevent="reset">Reset</button>
<p>What's the best way to implement the reset of the component to restart the count up from 1 to 10?</p>
</div>javascript vue.js vuejs2 gsap
javascript vue.js vuejs2 gsap
edited Nov 15 '18 at 21:31
Boussadjra Brahim
6,2573631
asked Nov 15 '18 at 20:33
MSCMSC
1,69921627
edited Nov 15 '18 at 21:31
Boussadjra Brahim
6,2573631
asked Nov 15 '18 at 20:33
MSCMSC
1,69921627
edited Nov 15 '18 at 21:31
Boussadjra Brahim
6,2573631
edited Nov 15 '18 at 21:31
Boussadjra Brahim
6,2573631
edited Nov 15 '18 at 21:31
Boussadjra Brahim
6,2573631
6,2573631
asked Nov 15 '18 at 20:33
MSCMSC
1,69921627
asked Nov 15 '18 at 20:33
MSCMSC
1,69921627
asked Nov 15 '18 at 20:33
MSCMSC
1,69921627
1,69921627
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
First of all, your watcher for age in the my-counter component isn't ever firing because you aren't ever changing the value of the age prop. If it's initialized to 1 and gets set to 1 in the click-handler, it won't trigger the watcher because the value didn't change.
But second of all, it'd make more sense, in this case, to just move the reset method to the my-counter component and then call it from the parent scope via a ref, like so:
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
It looks like you'll also need to call the TweenLite.to method again if you want the counter to increment again. So it'd be good to pull that logic into its own method (say count) that you can call from the mounted hook and from the reset method.
Also, I noticed that it also seems like the TweenLite.to method is overriding the binding for the age prop until the counter has finished incrementing. If you want to reset the counter before the TweenLite.to method has finished, you'll need to store a reference to the returned tween object and then call its kill method before the counter starts.
Finally, I'm seeing that you're referencing the this.$root.age_end in the object passed to the TweenLite.to. Except in rare cases, this is considered bad practice, as now the component unnecessarily depends on the root Vue instance always having an age_end property and it obscures the flow of data. Since that value appears to be static, you should just set it as a data property of the component. Or at least pass it in as a prop from the parent.
Here's a working example with my suggested changes:
Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null,
age_end: 10,
tween: null,
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
this.count();
},
methods: {
count() {
if (this.tween) {
this.tween.kill();
}
this.tween = TweenLite.to(this, 10, {
age_now: this.age_end,
roundProps: "age_now",
ease: Linear.easeNone
});
},
reset() {
this.age_now = 1;
this.count();
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
</div>answered Nov 15 '18 at 21:16
thanksdthanksd
22.6k96273
Alternatively, you could use an event bus, bind the reset to the event and then emit the event on click of the button, but that's a bit of an overkill in this case
– Tomasz Rup
Nov 15 '18 at 21:54
Very clear and helpful, thanks. I am incorporating it into my code now.
– MSC
Nov 16 '18 at 2:57
Hmm. Seems the restructured Tween now kills the enter-active CSS transition on the component. I'll post a separate question if I can't sort it out.
– MSC
Nov 16 '18 at 6:49
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
});
}
});
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%2f53327507%2freset-a-vue-counter-component-from-the-parent-component%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
First of all, your watcher for age in the my-counter component isn't ever firing because you aren't ever changing the value of the age prop. If it's initialized to 1 and gets set to 1 in the click-handler, it won't trigger the watcher because the value didn't change.
But second of all, it'd make more sense, in this case, to just move the reset method to the my-counter component and then call it from the parent scope via a ref, like so:
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
It looks like you'll also need to call the TweenLite.to method again if you want the counter to increment again. So it'd be good to pull that logic into its own method (say count) that you can call from the mounted hook and from the reset method.
Also, I noticed that it also seems like the TweenLite.to method is overriding the binding for the age prop until the counter has finished incrementing. If you want to reset the counter before the TweenLite.to method has finished, you'll need to store a reference to the returned tween object and then call its kill method before the counter starts.
Finally, I'm seeing that you're referencing the this.$root.age_end in the object passed to the TweenLite.to. Except in rare cases, this is considered bad practice, as now the component unnecessarily depends on the root Vue instance always having an age_end property and it obscures the flow of data. Since that value appears to be static, you should just set it as a data property of the component. Or at least pass it in as a prop from the parent.
Here's a working example with my suggested changes:
Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null,
age_end: 10,
tween: null,
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
this.count();
},
methods: {
count() {
if (this.tween) {
this.tween.kill();
}
this.tween = TweenLite.to(this, 10, {
age_now: this.age_end,
roundProps: "age_now",
ease: Linear.easeNone
});
},
reset() {
this.age_now = 1;
this.count();
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
</div>answered Nov 15 '18 at 21:16
thanksdthanksd
22.6k96273
Alternatively, you could use an event bus, bind the reset to the event and then emit the event on click of the button, but that's a bit of an overkill in this case
– Tomasz Rup
Nov 15 '18 at 21:54
Very clear and helpful, thanks. I am incorporating it into my code now.
– MSC
Nov 16 '18 at 2:57
Hmm. Seems the restructured Tween now kills the enter-active CSS transition on the component. I'll post a separate question if I can't sort it out.
– MSC
Nov 16 '18 at 6:49
add a comment |
First of all, your watcher for age in the my-counter component isn't ever firing because you aren't ever changing the value of the age prop. If it's initialized to 1 and gets set to 1 in the click-handler, it won't trigger the watcher because the value didn't change.
But second of all, it'd make more sense, in this case, to just move the reset method to the my-counter component and then call it from the parent scope via a ref, like so:
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
It looks like you'll also need to call the TweenLite.to method again if you want the counter to increment again. So it'd be good to pull that logic into its own method (say count) that you can call from the mounted hook and from the reset method.
Also, I noticed that it also seems like the TweenLite.to method is overriding the binding for the age prop until the counter has finished incrementing. If you want to reset the counter before the TweenLite.to method has finished, you'll need to store a reference to the returned tween object and then call its kill method before the counter starts.
Finally, I'm seeing that you're referencing the this.$root.age_end in the object passed to the TweenLite.to. Except in rare cases, this is considered bad practice, as now the component unnecessarily depends on the root Vue instance always having an age_end property and it obscures the flow of data. Since that value appears to be static, you should just set it as a data property of the component. Or at least pass it in as a prop from the parent.
Here's a working example with my suggested changes:
Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null,
age_end: 10,
tween: null,
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
this.count();
},
methods: {
count() {
if (this.tween) {
this.tween.kill();
}
this.tween = TweenLite.to(this, 10, {
age_now: this.age_end,
roundProps: "age_now",
ease: Linear.easeNone
});
},
reset() {
this.age_now = 1;
this.count();
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
</div>answered Nov 15 '18 at 21:16
thanksdthanksd
22.6k96273
Alternatively, you could use an event bus, bind the reset to the event and then emit the event on click of the button, but that's a bit of an overkill in this case
– Tomasz Rup
Nov 15 '18 at 21:54
Very clear and helpful, thanks. I am incorporating it into my code now.
– MSC
Nov 16 '18 at 2:57
Hmm. Seems the restructured Tween now kills the enter-active CSS transition on the component. I'll post a separate question if I can't sort it out.
– MSC
Nov 16 '18 at 6:49
add a comment |
First of all, your watcher for age in the my-counter component isn't ever firing because you aren't ever changing the value of the age prop. If it's initialized to 1 and gets set to 1 in the click-handler, it won't trigger the watcher because the value didn't change.
But second of all, it'd make more sense, in this case, to just move the reset method to the my-counter component and then call it from the parent scope via a ref, like so:
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
It looks like you'll also need to call the TweenLite.to method again if you want the counter to increment again. So it'd be good to pull that logic into its own method (say count) that you can call from the mounted hook and from the reset method.
Also, I noticed that it also seems like the TweenLite.to method is overriding the binding for the age prop until the counter has finished incrementing. If you want to reset the counter before the TweenLite.to method has finished, you'll need to store a reference to the returned tween object and then call its kill method before the counter starts.
Finally, I'm seeing that you're referencing the this.$root.age_end in the object passed to the TweenLite.to. Except in rare cases, this is considered bad practice, as now the component unnecessarily depends on the root Vue instance always having an age_end property and it obscures the flow of data. Since that value appears to be static, you should just set it as a data property of the component. Or at least pass it in as a prop from the parent.
Here's a working example with my suggested changes:
Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null,
age_end: 10,
tween: null,
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
this.count();
},
methods: {
count() {
if (this.tween) {
this.tween.kill();
}
this.tween = TweenLite.to(this, 10, {
age_now: this.age_end,
roundProps: "age_now",
ease: Linear.easeNone
});
},
reset() {
this.age_now = 1;
this.count();
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
</div>answered Nov 15 '18 at 21:16
thanksdthanksd
22.6k96273
First of all, your watcher for age in the my-counter component isn't ever firing because you aren't ever changing the value of the age prop. If it's initialized to 1 and gets set to 1 in the click-handler, it won't trigger the watcher because the value didn't change.
But second of all, it'd make more sense, in this case, to just move the reset method to the my-counter component and then call it from the parent scope via a ref, like so:
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
It looks like you'll also need to call the TweenLite.to method again if you want the counter to increment again. So it'd be good to pull that logic into its own method (say count) that you can call from the mounted hook and from the reset method.
Also, I noticed that it also seems like the TweenLite.to method is overriding the binding for the age prop until the counter has finished incrementing. If you want to reset the counter before the TweenLite.to method has finished, you'll need to store a reference to the returned tween object and then call its kill method before the counter starts.
Finally, I'm seeing that you're referencing the this.$root.age_end in the object passed to the TweenLite.to. Except in rare cases, this is considered bad practice, as now the component unnecessarily depends on the root Vue instance always having an age_end property and it obscures the flow of data. Since that value appears to be static, you should just set it as a data property of the component. Or at least pass it in as a prop from the parent.
Here's a working example with my suggested changes:
Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null,
age_end: 10,
tween: null,
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
this.count();
},
methods: {
count() {
if (this.tween) {
this.tween.kill();
}
this.tween = TweenLite.to(this, 10, {
age_now: this.age_end,
roundProps: "age_now",
ease: Linear.easeNone
});
},
reset() {
this.age_now = 1;
this.count();
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
</div>Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null,
age_end: 10,
tween: null,
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
this.count();
},
methods: {
count() {
if (this.tween) {
this.tween.kill();
}
this.tween = TweenLite.to(this, 10, {
age_now: this.age_end,
roundProps: "age_now",
ease: Linear.easeNone
});
},
reset() {
this.age_now = 1;
this.count();
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
</div>Vue.component('my-counter', {
template: "#counter-vue",
data: function() {
return {
age_now: null,
age_end: 10,
tween: null,
}
},
props: {
age: Number
},
mounted: function() {
this.age_now = this.age;
this.count();
},
methods: {
count() {
if (this.tween) {
this.tween.kill();
}
this.tween = TweenLite.to(this, 10, {
age_now: this.age_end,
roundProps: "age_now",
ease: Linear.easeNone
});
},
reset() {
this.age_now = 1;
this.count();
}
}
});
var app = new Vue({
el: '.container',
data: {
age: 1,
}
});<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/x-template" id="counter-vue">
<div>
<p>Age: {{age_now}}</p>
</div>
</script>
<div class="container">
<h1>Vue Component Reset</h1>
<my-counter ref="counter" :age="age"></my-counter>
<button @click.prevent="$refs.counter.reset">Reset</button>
</div>answered Nov 15 '18 at 21:16
thanksdthanksd
22.6k96273
edited Nov 15 '18 at 21:35
answered Nov 15 '18 at 21:16
thanksdthanksd
22.6k96273
answered Nov 15 '18 at 21:16
thanksdthanksd
22.6k96273
answered Nov 15 '18 at 21:16
thanksdthanksd
22.6k96273
22.6k96273
Alternatively, you could use an event bus, bind the reset to the event and then emit the event on click of the button, but that's a bit of an overkill in this case
– Tomasz Rup
Nov 15 '18 at 21:54
Very clear and helpful, thanks. I am incorporating it into my code now.
– MSC
Nov 16 '18 at 2:57
Hmm. Seems the restructured Tween now kills the enter-active CSS transition on the component. I'll post a separate question if I can't sort it out.
– MSC
Nov 16 '18 at 6:49
add a comment |
Alternatively, you could use an event bus, bind the reset to the event and then emit the event on click of the button, but that's a bit of an overkill in this case
– Tomasz Rup
Nov 15 '18 at 21:54
Very clear and helpful, thanks. I am incorporating it into my code now.
– MSC
Nov 16 '18 at 2:57
Hmm. Seems the restructured Tween now kills the enter-active CSS transition on the component. I'll post a separate question if I can't sort it out.
– MSC
Nov 16 '18 at 6:49
Alternatively, you could use an event bus, bind the reset to the event and then emit the event on click of the button, but that's a bit of an overkill in this case
– Tomasz Rup
Nov 15 '18 at 21:54
Alternatively, you could use an event bus, bind the reset to the event and then emit the event on click of the button, but that's a bit of an overkill in this case
– Tomasz Rup
Nov 15 '18 at 21:54
Very clear and helpful, thanks. I am incorporating it into my code now.
– MSC
Nov 16 '18 at 2:57
Very clear and helpful, thanks. I am incorporating it into my code now.
– MSC
Nov 16 '18 at 2:57
Hmm. Seems the restructured Tween now kills the enter-active CSS transition on the component. I'll post a separate question if I can't sort it out.
– MSC
Nov 16 '18 at 6:49
Hmm. Seems the restructured Tween now kills the enter-active CSS transition on the component. I'll post a separate question if I can't sort it out.
– MSC
Nov 16 '18 at 6:49
add a comment |
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.
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%2f53327507%2freset-a-vue-counter-component-from-the-parent-component%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
