Vue.js 和 Firebase - 超出最大调用堆栈大小

Question

我正在使用 Vue.js 和 Firebase 构建一个小应用程序 - 现在我想创建一个我的用户“真实数据库”列表。哪个工作正常，但只有在我登录后刷新它时才可以。

[Vue 警告]：渲染错误：“RangeError: 超出最大调用堆栈大小”
RangeError: 超出最大调用堆栈大小

我的 HTML 如下所示：

              <div class="col-12">
                  <h2>Liste</h2>
                  <div class="user-ol">
                    <ol id="example-1">
                      <li v-for="user1 in users[0]">
                       {{ user1.name }}
                      </li>
                    </ol>
                  </div>    
                </div>

和我这样创建的 Hook

new Vue({
el: '#app',
data: {
    users: [],
    email: '',
    name: '',
    authUser: null,
    role: null,
    counter: null,
    active: null
},
    created () {
    firebase.auth().onAuthStateChanged(user => {
        this.authUser = user
        if (user) {
            db.ref('users').on('value', snapshot => this.users.push(snapshot.val()));

            this.displayname = user.displayName
            this.email = user.email
            db.ref('users').child(user.uid).once('value', snapshot =>{
                if (snapshot.val()){
                    this.role = snapshot.val().role
                    this.counter = snapshot.val().counter
                    this.active = snapshot.val().active
                    this.name = snapshot.val().name
                    Vue.set(this.authUser, 'counter', this.counter)
                    Vue.set(this.authUser, 'active', this.active)
                    Vue.set(this.authUser, 'name', this.name)

                }
            })
        }
    })
}

我之前在我的列表元素中也有这个，但它甚至不会呈现我的页面，并且每 2 秒出现 5 个这些错误

v-bind:class="{ 'green font-weight-bold' : user.active }"

我不确定我做错了什么：/

Answer 1

好吧，如果不尝试您的代码，我无法确定您做错了什么，所以我只是从侧面给出一些看法。

<li v-for="user1 in users[0]">
  {{ user1.name }}
</li>

在这里，您正在迭代单个对象的道具。例如。如果用户是 {prop1: 'str', prop2: 'str2'} 之类的对象，则您在 v-for 中的代码类似于 prop1.name、prop2.name。不要认为这是想要的。

同样users[0] 最初是未定义的。

不确定我提到的事情是否会导致RangeError: Maximum call stack size exceeded。无论如何，我建议从那个奇怪的用户迭代开始，然后从 firebase 检查你的事件（尤其是.on('value', ...) 回调）。你总是可以添加一些调试打印来弄清楚发生了什么。