Vue Element-ui 表单重置

最新推荐文章于 2025-02-13 17:48:18 发布

原创最新推荐文章于 2025-02-13 17:48:18 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue篇专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了Vue.js中重置data属性的正确方法，特别是当data依赖于props或methods时，如何避免this指向错误，确保组件状态正确更新。

案例

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

如果实际到重置之后涉及到调用方法，

export default {
    props: {
        P: Object
    },
    data () {
        return {
            A: {
                a: this.methodA
            },
            B: this.P
        };
    },
    methods: {
        resetData () { // 更新时调用
            Object.assign(this.$data, this.$options.data()); // 有问题！！！
        },
        methodA () {
            // do sth.
        },
        methodB () { // 通过用户操作调用
            this.A.a && this.A.a(); // this.A.a is undefined, this.B is undefined！！！
        }
    }
}

请更改为：

resetData () { // 更新时调用
    Object.assign(this.$data, this.$options.data.call(this));
   }

原因：
构建Vue实例的时候，构造函数和自定的属性是定义在$options下面，而方法却不是

总结

data()中若使用了this来访问props或methods，在重置** $d a t a * * 时，注意 * * t h i s .$ options.data()的this指向，最好使用this.$options.data.call(this)**。