Vuejs2 最干净的方式重置表单，并在表单增长时轻松维护

我正在使用VueJS创建一个输入表单，该表单包含大约10多个输入字段。我有一个重置按钮，当点击它时，它会将表单的值“重置”为空字符串、null或布尔值（我有实际表单中的复选框）

我目前所做的一切都很好，但我不禁怀疑，一旦我在表单中添加了其他字段，这个方法将很难维护。每次我要添加一个新字段时，我还必须用这个新字段更新我的重置方法*我确实想让事情简单化，所以我也不想让事情过于复杂化…所以也许让这种方法对于初级开发人员来说更容易阅读

这是一个好方法吗？

以下是我当前的代码：

脚本部分：

.snip。。。
数据（）{
返回{
秀：没错，
产品：[]，
主题：[]，
表格：{
产品：“”，
主题：“”
}
}
},
创建（）{
这是getProducts（）{
this.show=true
})
}
剪

模板部分：

剪
产品：
挑选
{{product.product_name}
剪
重置表单
剪

我见过很多解决方案，包括

Object.assign（this.$data，this.$options.data.call（this））

如果数据需要为空字符串，还可以使用for循环重新创建对象。但是，我喜欢这个解决方案：

    data () {
      return {
       form: this.getEmptyForm()
      }
    },
    methods: {
      getEmptyForm () {
       return {
        product: '',
        subject: ''
       }
      }, 
      resetForm () {
       this.form = this.getEmptyForm()
      }
    }

我用来重置表单和/或

数据

值的最干净（大概也是最稳健）的方法是将初始状态（可通过访问）合并到“脏”状态

Object.assign（this.$data，this.$options.data.call（this））；

说明：

作为合并策略，如果你愿意的话。可以随意使用第三方库，如或用于高级合并

this.$data

指的是当前的Vue实例

data

。摘自：

创建实例后，可以通过

vm.$data

访问原始数据对象

这就是为什么您不简单地传递

这个

，即使它是Vue实例

此.$options.data

是数据“工厂”，允许您创建初始数据的新副本

不过，要让它起作用，您需要

该部分只是一个函数原型，允许您使用给定的

this

值调用函数，在本例中是Vue实例。当您在初始化时从

数据

对象中引用Vue实例时，尤其需要这样做，例如：

data（）{
返回{
pageTitle:此.$route.meta.title
}
},
//或者，ES6同等标准
数据：vm=>({
pageTitle:vm.$route.meta.title
})

此时，如果没有给定的

this

上下文，它实际上会抛出异常

为了使这一点更加方便，您可以扩展Vue原型，并在需要重置

数据的任何时候和任何地方开始调用它

完整演示

Vue.prototype.$resetVueData=function（）{
if（此的类型。$options.data！=='function'）{
console.warn（'此Vue实例中未指定'data'选项'，此）；
返回false；
}
赋值（this.$data，this.$options.data.call（this））；
}
新Vue({
el:“#应用程序”，
数据：vm=>({
秀:假,，
产品：[]，
主题：[]，
表格：{
产品：“”，
主题：“”
}
}),
方法：{
重置表单（）{
这是。$resetVueData（）；
//表单重置逻辑的其余部分在这里
//如Vuetify的form.resetValidation或复杂数据的状态恢复
}
}
})

{{$data}}
显示/隐藏
加随机积
添加随机主题
添加表单数据
重置
似乎与表单a上的重置按钮几乎完全相同？
<form v-if="show">
..snip..
<label for="product_select_input">Product:</label>
          <select
            id="product_select_input"
            v-model="form.product"
            required
          >
            <option disabled value="">Select</option>
            <option
              v-for="product in products"
              :key="product.product_id"
              :value="product.product_id"
              >{{ product.product_name }}</option
            >
          </select>
..snip..
<button @click.prevent="resetForm">
            Reset Form
          </button>
...snip...
</form>

    data () {
      return {
       form: this.getEmptyForm()
      }
    },
    methods: {
      getEmptyForm () {
       return {
        product: '',
        subject: ''
       }
      }, 
      resetForm () {
       this.form = this.getEmptyForm()
      }
    }