相关疑难解决方法(0)

是否有正确的方法在vuejs中重置组件的初始数据?

我有一个具有一组特定起始数据的组件:

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)

javascript mvvm vue.js

68
推荐指数
5
解决办法
4万
查看次数

标签 统计

javascript ×1

mvvm ×1

vue.js ×1