首页 前端知识 vue3 reactive 重新赋值

vue3 reactive 重新赋值

2024-05-07 13:05:11 前端知识 前端哥 864 781 我要收藏

刚接触 vue3,想弹框,点确认调接口添加信息,然后数据清空,使用 reactive 定义的变量,修改变量时遇到点小问题,总结下:

在这里插入图片描述

定义变量
部分代码
<template>
	 <el-dialog title="添加" v-model="open" append-to-body>
      <el-form label-width="68px">
        <el-form-item label="name" prop="name">
          <el-input v-model="testForm.name"> </el-input>
        </el-form-item>
        <el-form-item label="age" prop="age">
          <el-input v-model="testForm.age"> </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="createUnit"> 确认 </el-button>
          <el-button @click="open = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
</template>
<script setup >
	let testForm = reactive({
	  name: "",
	  age: null,
	});
</script >
修改变量
function createUnit() {
  open.value = false;
  testForm = {
    name: "",
    age: null,
  };
}
或者
function createUnit() {
  open.value = false;
  testForm = reactive({
    name: "",
    age: null,
  });
}

想像vue2 一样给 testForm 重新赋值,结果表单里面是数据没清掉,表单内容还修改不了了

解决办法

1.各个属性单独赋值

function createUnit() {
  open.value = false;
  testForm.name = "";
  testForm.age = null;
}

2.使用 Object.assign

function createUnit() {
  open.value = false;
  testForm = Object.assign(testForm, {
    name: "",
    age: null,
  });
}

如果定义对象的属性比较多,可以定义一个函数,需要重新赋值的地方调用这个函数。

function createUnit() {
  open.value = false;
  reset();
}
function reset() {
  testForm.name = "";
  testForm.age = null;
  testForm.a = "";
  testForm.b = "";
  testForm.c = "";
  testForm.d = "";
}

如果大家有好的重新赋值的方法,还请指点。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7265.html
标签
评论
发布的文章

exceljs

2024-05-11 10:05:00

Java研学-JSON与AJAX

2024-05-10 22:05:37

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!