vue.js - vue js数组重置为初始数据
问题描述
目前我正在尝试重置正在加载的初始数据。任何帮助表示赞赏。
html:
<div id="app">
<input v-model="name" type="text">
<input v-model="year" type="text">
<div v-for="group in groups">
<input v-model="group.group_name" type="text">
<input v-model="group.remarks" type="text">
</div>
<button @click="reset">Click to reset</button>
</div>
Vue.js:
const groups = [
{
group_name: 'group1 name',
remarks: 'group1 remarks'
},
{
group_name: 'group2 name',
remarks: 'group2 remarks'
}
];
const Example = Vue.extend({
data() {
return{
name: 'Creator',
year: 0,
groups: groups,
group: {
group_name: '',
remarks: ''
}
}
},
methods: {
reset () {
Object.assign(this.$data, this.$options.data.call(this));
}
}
});
new Example({
el: '#app',
mounted () {
setTimeout(() => this.year = 2001, 1000);
}
});
当按钮触发重置功能时,只有名称和年份被重置。我如何让“group in groups”输入也重置?
解决方案
更改您的重置功能添加组对象
const Example = Vue.extend({
data() {
return{
name: 'Creator',
year: 0,
groups: groups
}
},
methods: {
reset () {
this.groups = [
{
group_name: '',
remarks: ''
}
]
}
}
});
推荐阅读
- amazon-web-services - AWS Lex 如何对 lex 的每个请求执行操作。即对于 lex 的每个 CloudWatch 日志
- botframework - 带有 URL 的 Microsoft Teams 任务模块不起作用
- android-statusbar - Android 11 - window.setDecorFitsSystemWindows 适用于 - 状态和导航
- python - 无法导入 keras 优化器
- amazon-web-services - 如何从代码构建而不是提交触发代码管道?
- python - 如何使用 python 查找列中是否包含 DATE?
- laravel-5 - Laravel 自定义条款
- amazon-web-services - 以 0 成本测试 Cloudformation 模板
- meteor - 谷歌分析不适用于 MeteorJS 应用程序
- javascript - 文本中的问题不在正确的行中