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)

                }
            })
        }
    })
}

我之前在list元素中也有这个选项，但是它甚至无法渲染我的页面，每2秒出现5个此类错误

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

我不确定自己在做什么错：/

Answer 1

好吧，如果不尝试代码，我无法确定您在做什么错，因此，我仅从侧面给出一些看法。

extension VertexProtocol where EdgeType.VertexType == VertexType {
    func neighbours() -> [VertexType] {
        return edges.map { $0.to }
    }
}

这里您要遍历单个对象的道具。例如。如果用户是<li v-for="user1 in users[0]"> {{ user1.name }} </li>之类的对象，则可以在v-for内编写类似{prop1: 'str', prop2: 'str2'}，prop1.name这样的行为。不要以为是想要的。

首先也未定义prop2.name。

不确定我提到的内容是否可能导致users[0]。无论如何，我建议从怪异的用户迭代开始，然后从firebase（尤其是RangeError: Maximum call stack size exceeded回调）检查事件。您总是可以添加一些调试打印信息以了解发生了什么。

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

1 个答案: