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];
      }
    }
}
相关推荐
知识分享小能手1 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng2 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科3 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20163 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20095 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔5 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼5 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder5 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔5 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔5 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js