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>
相关推荐
何中应31 分钟前
MindMap部署
前端·node.js
boooooooom31 分钟前
Pinia必学4大核心API:$patch/$reset/$subscribe/$onAction,用法封神!
javascript·vue.js·面试
NAGNIP34 分钟前
程序员效率翻倍的快捷键大全!
前端·后端·程序员
一个网络学徒37 分钟前
python5
java·服务器·前端
tiantian_cool38 分钟前
Claude Opus 4.6 模型新特性(2026年2月5日发布)
前端
0思必得043 分钟前
[Web自动化] Selenium获取元素的子元素
前端·爬虫·selenium·自动化·web自动化
不会敲代码11 小时前
解密JavaScript内存机制:从执行上下文到闭包的全景解析
javascript
用户5757303346241 小时前
🌟 从一行 HTML 到屏幕像素:浏览器是如何“画”出网页的?
前端
NEXT061 小时前
React Hooks 进阶:useState与useEffect的深度理解
前端·javascript·react.js
sure2821 小时前
React Native应用中使用sqlite数据库以及音乐应用中的实际应用
前端·react native