iT邦幫忙

0

關於VUE生命週期

先上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

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

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
小魚
iT邦大師 1 級 ‧ 2019-08-02 18:27:49

index 不是應該從0開始嗎?

mounted: function() {
    var pic = [];
    for (var i = 0; i < 3; i++) {
      firebase
        .database()
        .ref("課程資料/" + (i + 1) + "/圖片")
        .once("value", function(snapshot) {
          pic[i] = snapshot.val();
          console.log(pic[i]);
          console.log(snapshot.val());
        });
    }
0
ash0304
iT邦見習生 ‧ 2019-08-05 09:32:38

看起來你的pic只存在於mounted這個function內吧(?
Error有報出來說你的pic未定義唷 ReferenceError: pic is not defined

在data內在建立一個變數存他如何?

我要發表回答

立即登入回答