如何從Vue中的組件重新加載數據？

Question

我有App.vue組件及其子ItemsList.vue 。 在App.vue我有這個：

export default {
    name: 'App',
    components: {
        ItemsList
    },
    data() {
        return {
            items_list: [
                getRandomItem(),
                getRandomItem(),
                getRandomItem(),
            ]
        }
    }
}

數據是一組隨機生成的相同結構的項目。 我想在單擊按鈕時返回一個新生成的項目的新數組，但正如我所見， data()方法在啟動時只被調用一次，然后只返回此刻生成的內容。

如何重新運行此方法以返回新數據集？

Answer 1

data()方法僅在創建組件實例時調用一次。 這有點像生命周期鈎子。

您可以使用 function 生成新數組並替換組件的items_list

data () {
  return {
    items_list: []
  }
},
methods {
  newList () {
    this.items_list = [
      getRandomItem(),
      getRandomItem(),
      getRandomItem(),
    ]
  }
},
mounted () {
  this.newList()
}

文檔

• 元件數據 function
• Vuejs - 生命周期圖