vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了)
作者：肖肖肖丽珠
在使用reactive定义的变量时,直接赋值会失去响应式,为了清空 filters并确保响应式,可以使用Object.assign({}, filters)或者遍历对象逐个清除属性,本文介绍vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了),感兴趣的朋友一起看看吧
let filters = reactive({
status:''
});我想清空filters的内容。给接口传参的时候保证filters是个空对象。
所以使用filters={}。
页面上的确清空了。但是发现赋值一直没办法成功。我明明有下拉。点击某个下拉选项确一直选不中。没办法回填了。
因为reactive定义的变量重新赋值相当于重新创建了一个新的变量，就会失去响应式。
看网上写法还有Object.assign({},filters)。这样的页面上的两个filters的确也清空了。但是如果我在js里面新增了别的filters并没有绑定到dom上。比如我还想有个参数filters.name。那样使用Object.assign({},filters)。实际上是清楚不掉这个name的值的。
还是一个个循环清除对象吧
const clearFilters(filters) {
for (const key in filters) {
if (filters.hasOwnProperty(key)) {
delete filters[key];
}
}
}调用clearFilters(filters)
<el-form ref="formRef" :inline="true" :model="filters" class="card table-search">
<div class="search-title">{{ route.name }}</div>
<div class="search_content">
<div class="searchCol">
<el-form-item label="" prop="orgName">
<el-autocomplete
v-model="filters.orgName"
:trigger-on-focus="false"
value-key="orgName"
:fetch-suggestions="querySearch"
clearable
class="inline-input w-50"
placeholder="请输入机构"
@select="handleSelect"
/>
</el-form-item>
<el-form-item label="" prop="status">
<el-select
v-model="filters.status"
placeholder="请选择启用状态"
style="width: 240px"
clearable
>
<el-option :value="0" label="启用"></el-option>
<el-option :value="1" label="停用"></el-option>
</el-select>
</el-form-item>
</div>
<div class="search_btn">
<el-form-item class="operation">
<el-button type="primary" @click="search"> 查询</el-button>
<el-button @click="reset"> 清空</el-button>
</el-form-item>
</div>
</div>
</el-form>let filters = reactive({});
const formRef = ref();
const allOrgs=ref([
{orgName:'机构1',orgCode:'1'},
{orgName:'机构2',orgCode:'2'},
{orgName:'机构3',orgCode:'3'}
])
const querySearch = (queryString: string, cb: any) => {
const results = queryString ? allOrgs.value.filter(createFilter(queryString)) : allOrgs.value;
cb(results);
};
const createFilter = (queryString: string) => {
return (thisOrg) => {
return thisOrg.orgName.indexOf(queryString) != -1;
};
};
const handleSelect = (item) => {
filters.orgCode = item.orgCode;
};
//访问接口
const getTableList = () => {
let param= {param:{...filters} };//这里后端希望如果没有搜索条件就传个空对象param:{}这样的格式。
regionPage(newParams);
};
const search = () => {
if(filters.orgName==""){
delete filters.orgName;
delete filters.orgCode;
}
if(filters.status===""){
delete filters.status;
}
getTableList();
};
const reset = () => {
//Object.assign({},filters) 这里可能导致filters.orgCode没有清除掉
// filters={} 这里会导致页面失去响应式。清除内容后再去回填选择不上的问题
clearFilters(filters) //使用这个才正确
console.log("filters",filters)
formRef.value.resetFields();
getTableList();
};
const clearFilters(filters) {
for (const key in filters) {
if (filters.hasOwnProperty(key)) {
delete filters[key];
}
}
}到此这篇关于vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了)的文章就介绍到这了,更多相关vue3 reactive赋值问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！