UNIAPP - 如何初始化data數據

利用Object.assign實現數據合並

 

<template>
    <view><button type="default" @click="initData">點擊初始化數據</button></view>
</template>

<script>
export default {
    data() {
        return {
            hello: 0,
            show1: false,
            selectMenu2: []
        };
    },
    onLoad() {
        this.setData();
    },
    methods: {
        // 模擬修改數據
        setData() {
            this.hello = 'okok';
            this.show1 = true;
            this.selectMenu2 = ['你好', '世界'];
        },
        // 初始化數據
        initData() {
            // 把this對象放入target，最后再把初始化屬性拷貝進來(source)進行合並就可以了
            Object.assign(this, { hello: 0, show1: false, selectMenu2: [] });
            console.log('這里都可以取到值：', this, this._data);
        }
    }
};
</script>

<style></style>

 

 

 

表單域(Form)如何置空?

<template>
    <view>
        <demo-block title="clear-form" padding>
            <i-cell title="清空表單"></i-cell>
            <form @submit="formSubmit">
                <input type="number" v-model="uphone" name="uphone" class="feedback" value="" placeholder="請輸入你的手機號碼" maxlength="11" />
                <view class="sunui-border-b"></view>
                <textarea value="" v-model="feedback" name="feedback" placeholder="請輸入反饋信息..." class="feedback" />
                <button form-type="submit" class="submit-btn sunui-radius10" hover-class="sunui-hover">提交信息</button>
            </form>
        </demo-block>
    </view>
</template>

<script>
export default {
    data() {
        return {
            uphone: '',
            feedback: ''
        };
    },
    methods: {
        formSubmit(e) {
            let val = e.detail.value;
            
            console.log(val);

            // 實現表單/數據初始化(影響用戶體驗,無需v-modal) - 第一種方式
            // uni.redirectTo({
            //     url: '/pages/form/check'
            // });
            
            // 實現表單初始化(利用v-model) - 第二種方式
            Object.assign(this._data, { uphone: '', feedback: '' });
        }
    }
};

</script>

<style>
.feedback {
    background-color: #fff;
    padding: 20rpx;
    width: 650rpx;
    /* width: ; */
}
.submit-btn {
    background-color: #4a8af4;
    margin-top: 60rpx;
    color: #fff;
}
</style>