Vue触发器中的简单切换功能：您可能有无限的更新循环

Question

我已经阅读了有关无限更新循环的一些答案，但仍然不了解该问题。

我仍然不断收到此错误消息：

[Vue warn]: You may have an infinite update loop in a component render function.

编写简单切换功能的正确Vue方法是什么？看来我的方法是错误的。

<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>

Answer 1

您应该更改数据绑定

:click="toggleLogin()"

事件处理：

@click="toggleLogin()"