關於Vue生命週期，獲取資料的問題 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

相关文章推荐

机灵的木瓜 · 月嫂上岗前需要做哪些体检项目？_手机搜狐网· 9 月前 ·

魁梧的啄木鸟 · 歡樂好聲音：動物版歌喉讚與超級星光大道的滿滿 ...· 1 年前 ·

憨厚的毛衣 · ENHYPEN | Kpop Wiki | ...· 1 年前 ·

飘逸的荔枝 · 代购便宜一半是正品吗(斐乐代购便宜一半是正品 ...· 1 年前 ·

活泼的黄花菜 · 正交试验设计- MBA智库百科· 1 年前 ·

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

        <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
小的是新手，請各位大神幫幫忙
      .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:[]
希望最後出來的結果是像這樣

[{圖片:},{圖片:},{圖片:_______}]
      .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:[]
希望最後出來的結果是像這樣
[{圖片:_______},{圖片_______:},{圖片:_______}]
    .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() }));
    .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() }));
      .once("value",(snapshot) =>{
        snapshot.forEach(classdata=> {
          this.items.push({'圖片':classdata.val().圖片})
          console.log(classdata.val())
          console.log(classdata.val().圖片)
感謝大大!!!
我用你的第一個，成功了
真的很感謝 ![/images/emoticon/emoticon24.gif](/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().圖片)
snapshot, classdata 是長怎樣
[Observer參考](https://stackoverflow.com/questions/52873516/vue-js-returns-ob-observer-data-instead-of-my-array-of-objects)
通常不建議用中文當 key