javascript - Vue触发器中的简单切换功能: You may have an infinite update loop

Question

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

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

[Vue warn]:组件渲染函数中可能存在无限更新循环。

编写简单切换函数的正确 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

您应该更改数据绑定(bind)

:click="toggleLogin()"

事件处理:

@click="toggleLogin()"