我有一个具有一组特定起始数据的组件:
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
}
}
Run Code Online (Sandbox Code Playgroud)
这是模态窗口的数据,所以当它显示我希望它从这个数据开始.如果用户从窗口取消,我想将所有数据重置为此.
我知道我可以创建一个方法来重置数据,只需手动将所有数据属性设置回原始数据:
reset: function (){
this.modalBodyDisplay = 'getUserInput';
this.submitButtonText = 'Lookup';
this.addressToConfirm = null;
this.bestViewedByTheseBounds = null;
this.location = {
name: null,
address: null,
position: null
};
}
Run Code Online (Sandbox Code Playgroud)
但这看起来真的很草率.这意味着如果我对组件的数据属性进行了更改,我需要确保记得更新reset方法的结构.这并不是绝对可怕的,因为它是一个小的模块化组件,但它使我的大脑的优化部分尖叫.
我认为可行的解决方案是在ready方法中获取初始数据属性,然后使用保存的数据重置组件:
data: function (){
return {
modalBodyDisplay: 'getUserInput',
submitButtonText: 'Lookup',
addressToConfirm: null,
bestViewedByTheseBounds: null,
location:{
name: …Run Code Online (Sandbox Code Playgroud)