先上CODE

  mounted: function() {
    var pic = [];
    for (var i = 1; i <= 3; i++) {
      firebase
        .database()
        .ref("課程資料/" + i + "/圖片")
        .once("value", function(snapshot) {
          pic[i] = snapshot.val();
          console.log(pic[i]);
          console.log(snapshot.val());
        });
    }

我在mounted 時期獲取firebase的資料，同時存進陣列 pic[] 裡面，

  data() {
    return {
      items: [
        {圖片:pic[1]},
        {圖片:pic[2]},
        {圖片:pic[3]}
      ]
    };
  },

然後讓我在data裡面可以直接將資料塞進item陣列裡面，
感覺這段寫的怪怪的，不知道是不是這樣寫?或是有沒有可能是這樣?

  data() {
    return {
      items: pic
    };
  },

最後網頁部分就可以迴圈方式印出我要的東西，像這樣

        <div v-for="item in items" :key="item.id">
          <transition appear enter-active-class="animated bounceIn">
            <q-item to="/main">
              <img v-bind:src="item.圖片" class="responsive" />
            </q-item>

但是有報錯，如下，我想問題是出在data那段
Vue warn: Error in data(): "ReferenceError: pic is not defined"
ReferenceError: pic is not defined at VueComponent.data
[Vue warn]: Property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

小的是新手，請各位大神幫幫忙