Level 22
@potentdevelopment i think data should be method like this
data() {
return {
currentCount: 0,
showValue: 100,
}
}
Oct 16, 2022
5
Level 2
State Not Rendering
props: ['counter'],
data: {
currentCount: 0,
showValue: 100,
},
mounted() {
this.currentCount = this.counter;
},
watch: {
currentCount() {
this.currentCount = this.currentCount - 1;
},
},
template : `<div style="color: green;" v-on:click="decrementCounter">{{this.showValue}}</div>`,
methods: {
decrementCounter: function() {
this.$emit('decrement-counter', this.currentCount);
}
},
});```
In the template block, I'm trying to show the this.showValue in data and it is not rendering.
Level 2
Actually I got it to work another way by putting the data in the parent and them emitting the click event back up to the parent.
Level 2
I do have one more question though,
<!DOCTYPE html>
<html>
<head>
<title>Countdown</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<countdown v-on:decrement-counter="decrementCounter2($event)" v-bind:counter="this.initalCount" v-bind:color="this.color"></countdown>
</div>
<script>
Vue.config.devtools = true;
Vue.component('countdown',{
props: ['counter', 'color'],
template : `<div v-bind:style="{color: color}" @click="decrementCounter">{{counter}}</div>`,
methods: {
decrementCounter: function() {
this.$emit('decrement-counter');
}
},
});
var vm = new Vue({
el: '#app',
data: {
initalCount: 5,
color: "green",
},
methods: {
decrementCounter2: function() {
if(this.initalCount != 0) {
if(this.initalCount == 1) {
this.color = "red";
}
this.initalCount = parseInt(this.initalCount - 1);
}
}
}
});
// Example case
let componentDiv = document.querySelector("#app > div");
if(componentDiv) {
componentDiv.click();
componentDiv.click();
setTimeout(() => {
console.log(componentDiv.outerHTML);
});
}
</script>
</body>
</html>
When I load the page, the onClick event is triggered twice and the value displayed is 3. What am I missing here to prevent this?
Thank You.
Level 22
@potentdevelopment I think that is because you call componentDiv.click() twice in script.
1 like
Level 2
@Aung Htet Paing__ Thank you, this is one of those sample questions for a test. I was scratching my head and then realized what was going on.
Please or to participate in this conversation.