iT邦幫忙

2

關於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

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

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

1 個回答

4
dragonH
iT邦大師 1 級 ‧ 2019-08-02 15:13:51
最佳解答

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

沒有的話

我建議在 created fetch data

codepen

然後你的 code 問題很明顯

ReferenceError: pic is not defined

data 那不知道你的 pic 是什麼

因為你的 pic 只有在 mounted 存在

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

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

dragonH iT邦大師 1 級 ‧ 2019-08-02 15:19:05 檢舉

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

才去用 mounted

不然 這種 fetch data

在 created 就好

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

dragonH iT邦大師 1 級 ‧ 2019-08-02 15:27:17 檢舉

因為你這樣寫的話

data 都不會知道 pic 是什麼

所以你可以直接

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

另外補充一下 mounted

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

就會用

this.$refs.myBtn.click();

但是如果寫在 created

就會報錯

因為在 created 他還不存在

就必須要寫在 mounted

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

可是他現在變成

 Uncaught TypeError: Cannot read property 'items' of undefined

不認識 data裡面的items?

dragonH iT邦大師 1 級 ‧ 2019-08-02 16:14:25 檢舉

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

然後順便 console.log(this)

看你的 this 指到什麼

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:[]
    }
  },

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

console.log(this)是undefined

dragonH iT邦大師 1 級 ‧ 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() }));
  });

!!!!
感謝大大!!!
我用你的第一個,成功了
真的很感謝 /images/emoticon/emoticon24.gif

  created: function() {
    firebase
      .database()
      .ref("課程資料/")
      .once("value",(snapshot) =>{
        snapshot.forEach(classdata=> {
          this.items.push({'圖片':classdata.val().圖片})
          console.log(classdata.val())
          console.log(classdata.val().圖片)
        });
      });
dragonH iT邦大師 1 級 ‧ 2019-08-02 16:57:43 檢舉

/images/emoticon/emoticon12.gif

不過還想問一個問題,雖然我的WEB畫面沒有問題了

console.log(this.items)

出來的結果是
3) [{…}, {…}, {…}, ob: Observer]
0: {ob: Observer}
1: {ob: Observer}
2: {ob: Observer}
length: 3

我想像他出來結果應該是類似
{圖片: "statics/mis.png", 課程代碼: 3, 課程名稱: "管理資訊系統"}
是為什麼?

dragonH iT邦大師 1 級 ‧ 2019-08-02 17:15:35 檢舉

codepen

這樣產生資料沒問題呀

你可能要確認一下

snapshot, classdata 是長怎樣

Observer參考

還有

通常不建議用中文當 key

我要發表回答

立即登入回答