[英]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.