简体   繁体   English

如何从Vue中的组件重新加载数据?

[英]How to reload data from a component in Vue?

I have App.vue component and its child ItemsList.vue .我有App.vue组件及其子ItemsList.vue In App.vue I have this:App.vue我有这个:

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

The data is an array of randomly generated items of the same structure.数据是一组随机生成的相同结构的项目。 I want to return a new array of newly generated items when clicking a button but as I see, data() method is being called only once on start and then return just what was generated at the moment.我想在单击按钮时返回一个新生成的项目的新数组,但正如我所见, data()方法在启动时只被调用一次,然后只返回此刻生成的内容。

How do I rerun this method to return a new dataset?如何重新运行此方法以返回新数据集?

The data() method is called only once when the instance of the component is created. data()方法仅在创建组件实例时调用一次。 It's a bit like a lifecycle hook.这有点像生命周期钩子。

You can use a function to generate a new array and replace the items_list of the component您可以使用 function 生成新数组并替换组件的items_list

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

Documentation文档

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM