vue2将data中对象内容置空

UTF-9

已于 2024-04-16 06:20:45 修改

阅读量651

点赞数 5

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2024-04-10 11:05:31 首次发布

本文链接：https://blog.csdn.net/weixin_45939316/article/details/137586947

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文讲述了在Vue2项目中，如何使用`Object.assign`方法清空search栏和弹窗中的对象数据，包括`lookParm`对象的实例化和重置过程。

摘要由CSDN通过智能技术生成

项目场景：

vue2将data中对象内容置空

问题描述

1.点击重置按钮，将搜索栏中的内容清空
2.点击弹窗时，将弹窗中上次保留下来的内容清空

<el-main>
        <!--搜索栏-->
        <el-form :model="lookParm" label-width="80px" :inline="true" size="mini">
            <el-form-item label="读者学号">
                <el-input v-model="lookParm.username"></el-input>
            </el-form-item>
            <el-form-item label="读者姓名">
                <el-input v-model="lookParm.learnNum"></el-input>
            </el-form-item>
            <el-form-item label="读书名称">
                <el-input v-model="lookParm.bookName"></el-input>
            </el-form-item>
            ........
            <el-button style="color:#FF7670" icon="el-icon-close" @click="resertBtn">重置</el-button>
</el-main>

export default {
    data() {
        return {
            tableHeight: 0,
            tableData: [],
            //lookParm与后端接口保持一致  totaL多出来的字段  是总条数
            lookParm: {
                total: 0,
                currentPage: 1,
                pageSize: 10,
                username: "",
                learnNum: "",
                bookName: "",
                applyStatus: "",
                borrowStatus: "",
                returnStatus: "",
                timeStatus: "",
            },
            ......
methods: {
resertBtn() {
            Object.assign(this.$data.lookParm, this.$options.data().lookParm);
            this.LoadMsg()
        },
        searchBtn() {
            this.LoadMsg();
        },
        async LoadMsg() {
            let res = await getLookBorrowListApi(this.lookParm);
            if (res && res.code == 200) {
                console.log(res)
                this.tableData = res.data.records
            }
        }