I added a click event to the button element which calls the increase method to update the counter. The result() and result2() methods are called when the page loads, but they also get called automatically when the button is clicked. I'm wondering why this happens and how the increase, result, and result2 methods are related to each other. Is there a way to make them only call once?
Here is the code:
<div id="app">
<button v-on:click="increase">Click Me</button>
<p>{{ counter }}</p>
<p>{{ result() }}</p>
<p>{{ result2() }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increase: function() {
this.counter++
},
result: function() {
console.log('Hi I m result');
},
result2: function() {
console.log('Hi I m result 2');
}
}
})
</script>