我有一个具有一组特定起始数据的组件:
data: function (){
return {
modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue'
submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes'
addressToConfirm: null,
bestViewedByTheseBounds: null,
location:{
name: null,
address: null,
position: null
}
}
这是模态窗口的数据,所以当它显示时,我希望它从这个数据开始.如果用户从窗口中取消,我想将所有数据重置为该值.
我知道我可以创建一种方法来重置数据,只需手动将所有数据属性设置回原始值:
reset: function (){
this.modalBodyDisplay = 'getUserInput';
this.submitButtonText = 'Lookup';
this.addressToConfirm = null;
this.bestViewedByTheseBounds = null;
this.location = {
name: null,
address: null,
position: null
};
}
但这看起来真的很草率.这意味着,如果我更改组件的数据属性,我需要确保我记得更新重置方法的 struct .这并不是绝对可怕,因为它是一个小的模块化组件,但它让我大脑的优化部分尖叫.
我认为可行的解决方案是在ready
方法中获取初始数据属性,然后使用保存的数据重置组件:
data: function (){
return {
modalBodyDisplay: 'getUserInput',
submitButtonText: 'Lookup',
addressToConfirm: null,
bestViewedByTheseBounds: null,
location:{
name: null,
address: null,
position: null
},
// new property for holding the initial component configuration
initialDataConfiguration: null
}
},
ready: function (){
// grabbing this here so that we can reset the data when we close the window.
this.initialDataConfiguration = this.$data;
},
methods:{
resetWindow: function (){
// set the data for the component back to the original configuration
this.$data = this.initialDataConfiguration;
}
}
但是initialDataConfiguration
对象随着数据的变化而变化(这是有意义的,因为在读取方法中,我们的initialDataConfiguration
得到的是数据函数的范围).
有没有办法在不继承范围的情况下获取初始配置数据?
我是不是想得太多了?有更好/更简单的方法吗?
硬编码初始数据是唯一的 Select 吗?