如何避免数据跟着一块变呢?

作者站长头像
站长
· 阅读数 6
  1. 输入新的姓名和年龄
  2. 提交
  3. 点击过滤(此时你刚刚添加的姓名和年龄出现在了最终的结果中)
  4. 此时,如果你修改上面输入框中的内容,下面结果中对应的内容也会发生变化

这是为什么呢?该如何修改才能使在修改上面输入框中的内容时,下面结果中对应的内容不发生变化呢?

注:这里的persons可以看作是一个存储在服务端数据库中的大数据。

<script setup lang="ts">
import { ref, version as vueVersion, reactive, toRaw } from 'vue'
import { version as epVersion } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
const form = reactive({
  name: "",
  age: "",
})
const formRef = ref(null);

async function submit(formInstance) {
  if(!formInstance) return;
  await formInstance.validate((valid) => {
    if(valid) {
      console.log("valid success");
      ElMessage({
        message: "添加成功",
        type: "success"
      })
      persons.push(toRaw(form));
    }else {
      console.log("valid failed");
    }
  })
}
function reset(formInstance) {
  if(!formInstance) return;
  formInstance.resetFields();
}

const persons = [{name: "peter", age: "18"}, {name: "Tom", age: "22" }];

const filterForm = reactive({
  name: ""
});
const filterPersons = ref();
function filter() {
  const result = persons.filter(person => filterForm.name === "" || person.name === filterForm.name);
  console.log("result: ", result);
  filterPersons.value = result;
}
filter();
</script>

<template>
  <h2>添加新数据</h2>
  <el-form :model="form" ref="formRef">
    <el-form-item prop="name">
      <el-input v-model="form.name" placeholder="请输入你的名字"></el-input>
    </el-form-item>
    <el-form-item prop="age">
      <el-select v-model="form.age" clearable>
        <el-option v-for="age in 18" :value="age"></el-option>
      </el-select>
    </el-form-item>
    
    <el-form-item>
      <el-button @click="submit(formRef)" type="primary">提交</el-button>
      <el-button @click="reset(formRef)">重置</el-button>
    </el-form-item>
  </el-form>

  <h2>过滤数据</h2>
  <el-form :model="filterForm">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item clearable>
          <el-input prop="name" placeholder="姓名"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <el-button @click="filter">过滤</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <h2>结果</h2>
  <el-table :data="filterPersons">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>

</template>

element plus playground

如何避免数据跟着一块变呢?

回复
1个回答
avatar
test
2024-06-23

persons.push(toRaw(form))因为你push的数据是form,而你下面修改的数据也是form,这是同一份数据,所以会一起变。你应该拷贝一份数据进行push比如使用JSON序列化persons.push(JSON.parse(JSON.stringify(form)))

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容