form 表单恢复初始数据

写表单的时候,想做到,某个操作时,表单恢复初始数据

this.$options.data().form form 是表单的对象

javascript 复制代码
<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible">
      <el-form :model="form" ref="form">
        <el-form-item label="用户名称1">
          <el-input v-model="form.aaa" class="w-200"></el-input>
        </el-form-item>
        <el-form-item label="用户名2">
          <el-input v-model="form.bbb" class="w-200"></el-input>
        </el-form-item>
        <el-form-item label="用户名称3">
          <el-input v-model="form.ccc" class="w-200"></el-input>
        </el-form-item>
        <el-form-item label="否,则清空数据">
          <el-radio-group v-model="form.ddd" @change="btn">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-button type="primary" @click="dialogVisible = true">按钮</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      form: {
        aaa: '',
        bbb: '',
        ccc: '',
        ddd: ''
      }
    }
  },
  methods: {
    btn (val) {
      if (val === 2) {
        this.form = this.$options.data().form
        this.form.ddd = 2
      }
    }
  }
}
</script>

<style>
</style>
相关推荐
最贪吃的虎3 分钟前
什么是开源?小白如何快速学会开源协作流程并参与项目
java·前端·后端·开源
DigitalOcean3 分钟前
加速 JavaScript 开发:DigitalOcean 应用托管现已原生支持 Bun
javascript
裴嘉靖5 分钟前
Vue + ECharts 实现图表导出为图片功能详解
前端·vue.js·echarts
用泥种荷花6 分钟前
【LangChain学习笔记】输出解析器
前端
闲云一鹤34 分钟前
Cesium 使用 Turf 实现坐标点移动(偏移)
前端·gis·cesium
Thomas游戏开发39 分钟前
Unity3D IL2CPP如何调用Burst
前端·后端·架构
想学后端的前端工程师1 小时前
【微前端架构实战指南:从原理到落地】
前端·架构·状态模式
用户6802659051191 小时前
如何利用 Endpoint Central 提高企业终端管理效率
javascript·后端·面试
Keya1 小时前
DevEco Studio 使用技巧全面解析
前端·前端框架·harmonyos