2016-10-30 2 views
1

Vue.js, VueFire 및 Firebase를 사용하여 간단한 읽기/쓰기 응용 프로그램을 만들려고합니다. Vue.js with Firebase

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>App</title> 

    <!-- Vue --> 
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
    <!-- VueFire --> 
    <script src="https://cdn.jsdelivr.net/vuefire/1.1.0/vuefire.min.js"></script> 
    <!-- Firebase --> 
    <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script> 

</head> 

<body> 
    <div id="app"> 
    <ul> 
     <li v-for="story in stories"> 
     {{ story.body }} 
     </li> 
    </ul> 
    </div> 

    <script type="text/javascript" src="app.js"></script> 
</body> 
</html> 

그리고 내의 .js 파일은 다음과 같습니다

// Initialize Firebase 
var config = { 
    apiKey: "*****************************", 
    authDomain: "************.firebaseapp.com", 
    databaseURL: "https://************.firebaseio.com", 
    storageBucket: "", 
    messagingSenderId: "***********" 
}; 

var firebaseApp = firebase.initializeApp(config) 
var db = firebaseApp.database() 

var app = new Vue({ 
    el: '#app', 
    props: ['stories'] 
    firebase: { 
    anObject: { 
     source: db, 
     asObject: true, 
     // optionally provide the cancelCallback 
     cancelCallback: function() {} 
    } 
    } 
}) 

내가 firebase가 인식되지 않는 오류가 발생합니다. 왜 그런지 모르겠다. VueFire를 가져와야 제대로 작동합니다. 맞습니까?

답변

1

사용자 정의 js가 의존하는 스크립트 태그 순서가 변경됩니다.

HTML 문서의 스크립트 태그를 사용하면 전역 window 개체에 대한 모든 참조가 첨부되지만 태그가 표시되는 순서는 사용할 수있는 순서입니다. 존재하기 전에 window.firebase을 참조하고 있습니다.

+0

내가 누락되었습니다. – Kira