（已解決）資料自動擴展

vue.js vue3

小斑 2022-01-14 18:03:13 ‧ 1220 瀏覽

分享至

大家好
我希望可以讓以下程式的資料自動擴展，而不是寫死的。
請教該怎麼優化寫法呢？
謝謝

<script>
export default {
  data() {
    return {
      testData: {
        0: {
          apple: false,
          banana: false,
        },
        1: {
          apple: false,
          banana: false,
        },
	    2: {
          apple: false,
          banana: false,
        },
		……依此類推
      },
	}
  },
}
</script>

登入發表討論

直播研討會

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

直播中

1 個回答

黃彥儒

iT邦高手 1 級 ‧ 2022-01-14 20:43:11

最佳解答

<script>
export default {
  data() {
    return {
      testData: [
      ],
	}
  },
  methods:{
      insertOne: function(){
          this.testData.push({
          apple: false,
          banana: false,
        })
      }
  }
}
</script>

回應 3
分享
檢舉

小斑 iT邦新手 3 級 ‧ 2022-01-15 23:38:02 檢舉

謝謝，我目前嘗試在頁面載入時執行insertOne function，但只能顯示第一筆object的資料，之後的會出現這個訊息TypeError: Cannot read properties of undefined (reading 'apple')

吠吠 iT邦新手 3 級 ‧ 2022-01-16 20:05:33 檢舉

會出現這個的主要原因是你的 data 裡面沒有預設資料，所以他會報錯，可以修改成這樣試試看

<script>
export default {
  data() {
    return {
      testData: [
      0: {
          apple: false,
          banana: false,
        }
      ],
	}
  },
  methods:{
      insertOne: function(){
          this.testData.push({
          apple: false,
          banana: false,
        })
      }
  }
}
</script>