rules: {
? ? ? ? code: [this.$rules.required()],
? ? ? ? name: [this.$rules.required()],
? ? ? ? age: [
? ? ? ? ? {min: 1, max: 120, type: 'number', message: '年齡 1 到 120 之間', trigger: 'blur'}
? ? ? ? ],
? ? ? ? email: [
? ? ? ? ? {type: 'email', message: '郵箱格式不正確', trigger: 'blur'}
? ? ? ? ]
? ? ? },

this.$rules是一個自定義全局變量，想到可能是由于this指向的問題導(dǎo)致找不到$rules.required對象了。

首先，我們知道，vue中 this.$options.data() 可以獲取原始的data值（只讀），this.$data 獲取當(dāng)前狀態(tài)下的data,在重置data數(shù)據(jù)時，拷貝重新賦值一下就行了。

如下：

Object.assign(this.$data, this.$options.data());

這是，如果，你的data數(shù)據(jù)中有采用this的寫法，在調(diào)用this.$options.data() 就會報錯，因為data()內(nèi)部的this指向不對。

vue文檔中有關(guān)于data的指向問題的解釋

如下：

如果你為 data property 使用了箭頭函數(shù)，則 this 不會指向這個組件的實例，不過你仍然可以將其實例作為函數(shù)的第一個參數(shù)來訪問。

data: vm => ({ a: vm.myProp })

這是一種方法，還有一種方法是調(diào)用時為data函數(shù)指定this。

如下：

Object.assign(this.$data, this.$options.data.call(this));

vue騷操作之this.$options.data()

重置vue組件的data數(shù)據(jù)

在vue單文件組件里有時需要重置data中的數(shù)據(jù)，比如表單填寫一半，用戶想重新填寫。

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

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