Embarked on learning Vue.js recently and I am intrigued by the unusual behavior in my simple code. I cannot seem to figure out what is going wrong. I am attempting to increment a counter inside mustache syntax, but something strange is happening with this variable
This is my code:
new Vue({
el: '#app',
data: {
counter: 5,
state: false
},
methods: {
fun: function() {
this.state = !this.state
}
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ counter }}</p>
<button v-on:click="fun">Button</button>
<p v-if="state">
Miss me? {{ counter++ }}
</p>
</div>I am getting a console warning
[Vue warn]: You may have an infinite update loop in a component render function.counter++ is called.
I thought that running an expression inside mustache syntax would work, but it seems to be causing issues for me.
Could someone shed light on what might be happening behind the scenes?