如何从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 - 生命周期图