Reputation: 3859
How to display the value which is inside computed in VueJS2 ? Actually i'm trying to return the value click*2 using computed property. So i'm displaying the output using the expression {{counter}}
. But i'm not getting any output, at first it was set to counter to 0 (stored in the data). Even i didn't use v-once. So why my counter value is not updating through computed property?
<div id="app4">
<p>counter : {{ counter }}</p>
<p>clicks : {{ click }}</p>
<button v-on:click="increment">increment</button>
</div>
<script>
var vm = new Vue({
el: '#app4',
data: {
counter:0,
click: 0,
},
methods: {
increment() {
this.click++;
}
},
computed: {
counter() {
return this.click * 2;
}
}
});
</script>
Upvotes: 1
Views: 141
Reputation: 3653
Remove counter
from data and it will work. You have two properties that shadow one another - one in data
and the other in computed
.
Upvotes: 3