如何避免数据跟着一块变呢?
- 输入新的姓名和年龄
- 提交
- 点击过滤(此时你刚刚添加的姓名和年龄出现在了最终的结果中)
- 此时,如果你修改上面输入框中的内容,下面结果中对应的内容也会发生变化
这是为什么呢?该如何修改才能使在修改上面输入框中的内容时,下面结果中对应的内容不发生变化呢?
注:这里的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>
回复
1个回答
test
2024-06-23
persons.push(toRaw(form))
因为你push的数据是form,而你下面修改的数据也是form,这是同一份数据,所以会一起变。你应该拷贝一份数据进行push比如使用JSON序列化persons.push(JSON.parse(JSON.stringify(form)))
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容