關於Vue生命週期，獲取資料的問題

vue vue.js firebase javascript quasar

老安不要 2019-08-02 15:02:57 ‧ 7502 瀏覽

分享至

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

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

老安不要 iT邦新手 5 級 ‧ 2019-08-02 15:05:11 檢舉

才發現重複發問了，真的不好意思= = 不知道怎麼刪掉多的發問 @@

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

dragonH

iT邦超人 5 級 ‧ 2019-08-02 15:13:51

最佳解答

有什麼特別的原因要在 mounted fetch data 嗎

沒有的話

我建議在 created fetch data

codepen

然後你的 code 問題很明顯

ReferenceError: pic is not defined

data 那不知道你的 pic 是什麼

因為你的 pic 只有在 mounted 存在

回應 14
分享
檢舉

看更多先前的回應...收起先前的回應...

老安不要 iT邦新手 5 級 ‧ 2019-08-02 15:16:08 檢舉

在 created fetch data 跟 mounted有什麼差別?
因為真的也搞不太懂VUE的生命週期 @@

dragonH iT邦超人 5 級 ‧ 2019-08-02 15:19:05 檢舉

如果你會需要呼叫 $el 建立之後的東西

才去用 mounted

不然這種 fetch data

在 created 就好

老安不要 iT邦新手 5 級 ‧ 2019-08-02 15:21:56 檢舉

我剛剛把mouted改成 created
一樣是 ReferenceError: pic is not defined
QQ

dragonH iT邦超人 5 級 ‧ 2019-08-02 15:27:17 檢舉

因為你這樣寫的話

data 都不會知道 pic 是什麼

所以你可以直接

this.items.push(snapshot.val());

另外補充一下 mounted

如果你想要一進去頁面就 click btn

就會用

this.$refs.myBtn.click();

但是如果寫在 created

就會報錯

因為在 created 他還不存在

就必須要寫在 mounted

老安不要 iT邦新手 5 級 ‧ 2019-08-02 15:28:11 檢舉

原來是直接push到item?
我試看看

老安不要 iT邦新手 5 級 ‧ 2019-08-02 16:10:56 檢舉

可是他現在變成

 Uncaught TypeError: Cannot read property 'items' of undefined

不認識 data裡面的items?

dragonH iT邦超人 5 級 ‧ 2019-08-02 16:14:25 檢舉

你可能需要貼一下完整的 code

然後順便 console.log(this)

看你的 this 指到什麼

老安不要 iT邦新手 5 級 ‧ 2019-08-02 16:26:22 檢舉

creates的部分

created: function() {
    firebase
      .database()
      .ref("課程資料/")
      .once("value", function(snapshot) {
        snapshot.forEach(function(classdata) {
          console.log(classdata.val())
          console.log(classdata.val().圖片)
          this.items.push("圖片:"+classdata.val().圖片)
        });
        console.log(items)
      });

data部分是先宣告成空陣列

 data() {
    return {
      items:[]
    }
  },

希望最後出來的結果是像這樣
[{圖片:},{圖片:},{圖片:_______}]

老安不要 iT邦新手 5 級 ‧ 2019-08-02 16:27:36 檢舉

console.log(this)是undefined

dragonH iT邦超人 5 級 ‧ 2019-08-02 16:37:53 檢舉

  firebase
    .database()
    .ref("課程資料/")
    .once("value", (snapshot) => {
      snapshot.forEach(classdata => this.items.push({ '圖片': classdata.val() }));
    });

這樣試試看

或者這樣

const self = this;
firebase
  .database()
  .ref("課程資料/")
  .once("value", (snapshot) => {
    snapshot.forEach(classdata => self.items.push({ '圖片': classdata.val() }));
  });

老安不要 iT邦新手 5 級 ‧ 2019-08-02 16:56:27 檢舉

!!!!
感謝大大!!!
我用你的第一個，成功了
真的很感謝

  created: function() {
    firebase
      .database()
      .ref("課程資料/")
      .once("value",(snapshot) =>{
        snapshot.forEach(classdata=> {
          this.items.push({'圖片':classdata.val().圖片})
          console.log(classdata.val())
          console.log(classdata.val().圖片)
        });
      });