I have been researching the issue of infinite update loops, but I am still struggling to grasp the concept.
Despite my efforts, I keep encountering the following error message:
[Vue warn]: You may have an infinite update loop in a component render function.Can someone explain the correct way to implement a simple toggle function in Vue? It seems like my current approach is not working as intended.
<template>
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-btn
color="normal"
:click="toggleLogin()"
>
{{login ? "Register" : "Login"}}
</v-btn>
</v-layout>
</v-container>
</v-content>
</template>
<script>
export default {
data: () => ({
login: true
}),
methods: {
toggleLogin: function() {
console.log(this.login)
this.login = !this.login
}
}
}
</script>