Vue.js и Firebase - превышен максимальный размер стека вызовов

Question

Я использую Vue.js и Firebase для создания небольшого приложения - теперь я хочу создать список моих пользователей "настоящая база данных". Который работает нормально, но только когда я обновляю его после входа в систему.

[Vue warn]: ошибка при рендеринге: «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>

и мой созданный Крюк вот так

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)

                }
            })
        }
    })
}

Раньше я тоже имел это в своем элементе списка, но тогда он даже не отображал мою страницу и вылетал с 5 из этих ошибок каждые 2 секунды

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', ...)).Вы всегда можете добавить отладочную печать, чтобы выяснить, что происходит.