Vue2和Vue3重置响应式数据

Alan-Xia

已于 2024-05-16 16:26:30 修改

阅读量265

点赞数 6

文章标签： javascript 前端开发语言 vue.js 前端框架

于 2024-05-16 16:25:54 首次发布

本文链接：https://blog.csdn.net/weixin_44072254/article/details/138966219

版权

Vue2我们提交表单后，想把表单数据重置到初始是不是这样？

data() {
    form: {}
}
methods: {
// 表单重置
    reset() {
      this.form = {
        businessId: this.$route.query.id,
        contractId: undefined,
        brandId:undefined,
        shopIdList: undefined,
        baseRent: undefined,
        rentStartTime: undefined,
        rentEndTime: undefined,
        rentDays: undefined,
        freeDecorateDays:undefined,
        rentCalculationType:undefined,
        cashierWay:[],
        checkoutType: undefined,
        deduction:undefined,
        rentIncreaseDesc:undefined,
        manageExpense:undefined,
        popularizeExpense:undefined,
        totalBond: undefined,
        decorateSubsidy:undefined,
        posRent:undefined,
        posDeposit:undefined,
        remark: undefined
      }; 
    },
    /** 新增表单操作 */
    handleAdd(row) {
      this.reset();
      this.open = true;
    },
    /** 编辑表单操作 */
    handldEdit(row) {
        this.reset();
        this.form = {...row}
    }
}

可以这样，就节省很多代码

// vue2代码
export default {
    data() {
        return {
            user: {
                name: 'alan',
                age: 18
            }
        }
    },
    methods: {
        editUser() {
            this.user.age = 28
            this.user.name = 'Join'
        },
        restUser() {
            this.user = this.$option.data().user
        }
    }
}

Vue3表单初始化就有很多方法，介绍其中一种

<script setup>
import { reactive } from 'vue'
const data = {
  status: 'running',
  name: 'Admin'
}

const reactData = reactive(data);
const jsonData = JSON.parse(JSON.stringify(data))
reactData.name = 'role'
console.log('改变后' ,reactData)
Object.keys(reactData).forEach(key => {
  reactData[key] = jsonData[key];
})
console.log('恢复成初始数据', reactData)
</script>