重置vue組件的data數據 this.$options.data()

1. 我們通常使用element-ui form表單組件時 點擊表單重置按鈕清空form表單數據

 使用表單ref屬性對象的resetFields() 方法可以重置表單

 

// this.$refs['表單ref屬性名'].resetFields() 
this.$refs[formName].resetFields();

 

 

2. vue中 this.$options.data() 可以重置vue組件中的data數據

 

<script>
    export default {
        data() {
            return {
                // data表單對象
                form: {
                    input: ''
                }
            }
        },
        methods: {
            // 重置表單方法
            retset() {
                this.form = this.$options.data().form;
            }
        },
    }
</script>

 

3. 也可以通過給組件 $data 對象賦值來重置來重置整個 $data

this.$data = this.$options.data();