重置vue元件的data資料

在vue單檔案元件裡有時需要重置data中的資料，比如表單填寫一半，使用者想重新填寫。

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

也可以通過給元件 $data 物件賦值來重置來重置整個 $data

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

結語

vue元件可以通過 this.$options 物件獲取你編寫的任何方法，比如 created( ) 生命週期函式，發現vue新玩法，偷笑.jpg