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是一個(gè)自定義全局變量，想到可能是由于this指向的問(wèn)題導(dǎo)致找不到$rules.required對(duì)象了。

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

如下：

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

這是，如果，你的data數(shù)據(jù)中有采用this的寫(xiě)法，在調(diào)用this.$options.data() 就會(huì)報(bào)錯(cuò)，因?yàn)閐ata()內(nèi)部的this指向不對(duì)。

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

如下：

如果你為 data property 使用了箭頭函數(shù)，則 this 不會(huì)指向這個(gè)組件的實(shí)例，不過(guò)你仍然可以將其實(shí)例作為函數(shù)的第一個(gè)參數(shù)來(lái)訪(fǎng)問(wèn)。

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

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

如下：

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

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

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

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

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

也可以通過(guò)給組件 $data 對(duì)象賦值來(lái)重置來(lái)重置整個(gè) $data