vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了)

 更新时间:2025年02月19日 09:54:08   作者:肖肖肖丽珠  
在使用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赋值问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一定要知道的 25 个 Vue 技巧

    一定要知道的 25 个 Vue 技巧

    这篇文章主要给大家分享将 prop 限制为类型列表、默认内容和扩展点、使用引号观察嵌套值、知道何时使用 v-if、单作用域 slot 的简写、有条件地渲染slot等25 个Vue 技巧,下文是下相关资料,需要的朋友可以参考一下
    2021-11-11
  • vue3使用vue-router嵌套多级路由的方法

    vue3使用vue-router嵌套多级路由的方法

    Vue3 嵌套路由的使用和 Vue2 相差不大,主要的区别是 Vue3 的路由实例化使用了 createApp() 方法,所以实例化路由时需要传入根组件,这篇文章主要介绍了vue3使用vue-router嵌套路由(多级路由),需要的朋友可以参考下
    2023-12-12
  • vue中$set用法详解

    vue中$set用法详解

    在vue中,并不是任何时候数据都是双向绑定的,解决数据没有被双向绑定我们可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名,这篇文章主要介绍了vue中$set用法详细讲解,需要的朋友可以参考下
    2022-12-12
  • Vue.js系列之项目结构说明(2)

    Vue.js系列之项目结构说明(2)

    这篇文章主要介绍了Vue.js系列之项目结构说明(2)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-01-01
  • Vue和React有哪些区别

    Vue和React有哪些区别

    这篇文章主要介绍了Vue和React有哪些区别,帮助大家更好的理解和学习JavaScript框架,感兴趣的朋友可以了解下
    2020-09-09
  • Vue input输入框回车以后自动刷新页面(直播程序)

    Vue input输入框回车以后自动刷新页面(直播程序)

    这篇文章主要介绍了直播程序,Vue input输入框回车以后自动刷新页面,适用场景是在输入框输入字符并按下回车键搜索时,刷新页面,需要的朋友参考下实现代码
    2023-01-01
  • Vue上传组件vue Simple Uploader的用法示例

    Vue上传组件vue Simple Uploader的用法示例

    本篇文章主要介绍了Vue上传组件vue Simple Uploader的用法示例,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • vue项目使用axios封装request请求的过程

    vue项目使用axios封装request请求的过程

    这篇文章主要介绍了vue项目使用axios封装request请求,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue quill editor 使用富文本添加上传音频功能

    vue quill editor 使用富文本添加上传音频功能

    vue-quill-editor 是vue项目中常用的富文本插件,其功能能满足大部分的项目需求。这篇文章主要介绍了vue-quill-editor 富文本添加上传音频功能,需要的朋友可以参考下
    2020-01-01
  • 教你使用vue3写Json-Preview的示例代码

    教你使用vue3写Json-Preview的示例代码

    这篇文章主要介绍了用vue3写了一个Json-Preview的相关知识,引入后直接<json-preview v-model="jsonData"></json-preview>就可以使用了,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06

最新评论