Vue JS: ждать загрузки базы - PullRequest
0 голосов
/ 06 июня 2018

Я хочу использовать firebase внутри компонента Vue JS, но похоже, что объект firebase загружается после создания моего компонента.

Есть ли способ дождаться загрузки firebase перед выполнением кода JS?

Пример: я хочу создать vue composant с именем loader, который выводит объект firebase на веб-консоль при его создании

<html>
<head>

    <!-- Firebase -->
<script defer src="/__/firebase/5.0.4/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/5.0.4/firebase-auth.js"></script>
<script defer src="/__/firebase/5.0.4/firebase-database.js"></script>
<script defer src="/__/firebase/5.0.4/firebase-messaging.js"></script>
<script defer src="/__/firebase/5.0.4/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<!-- Vue.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

</head>
<body>
    <div id="app"></div>
<script>
var loader =  {
    template: '<div></div>',
    created: function(){
        console.log(window.firebase); // undefined
    }
};
var app = new Vue({
    el : '#app',
    template : 
        `<div>
            <loader></loader>
        </div>`,
    components : {
        'loader' : loader
    }
});
</script>
</body>
</html>

Это не работает, но, конечно, через секунду я могу вывести объект firebase на консоль.

PS:

  • ЭтоМой первый вопрос на этом сайте, так что если у вас есть какие-либо советы о том, как задать вопрос, я также приму его.
  • Я француз, так что извините за мой английский

1 Ответ

0 голосов
/ 06 июня 2018

Вам необходимо удалить атрибуты defer из сценариев Firebase.Это приведет к выполнению сценариев после анализа всего документа, что означает, что ваш сценарий в теле выполняется перед сценариями Firebase.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...