快捷導(dǎo)航

vue3中reactive的對(duì)象清空所引發(fā)的問(wèn)題解決方案(清空不了和清空之后再去賦值就賦值不了)

更新時(shí)間：2025年02月19日 09:54:08 作者：肖肖肖麗珠

在使用reactive定義的變量時(shí),直接賦值會(huì)失去響應(yīng)式,為了清空?filters并確保響應(yīng)式,可以使用Object.assign({},?filters)或者遍歷對(duì)象逐個(gè)清除屬性,本文介紹vue3中reactive的對(duì)象清空所引發(fā)的問(wèn)題解決方案(清空不了和清空之后再去賦值就賦值不了),感興趣的朋友一起看看吧

let filters = reactive({
  status:''
});

我想清空f(shuō)ilters的內(nèi)容。給接口傳參的時(shí)候保證filters是個(gè)空對(duì)象。

所以使用filters={}。

頁(yè)面上的確清空了。但是發(fā)現(xiàn)賦值一直沒(méi)辦法成功。我明明有下拉。點(diǎn)擊某個(gè)下拉選項(xiàng)確一直選不中。沒(méi)辦法回填了。

因?yàn)閞eactive定義的變量重新賦值相當(dāng)于重新創(chuàng)建了一個(gè)新的變量，就會(huì)失去響應(yīng)式。

看網(wǎng)上寫(xiě)法還有Object.assign({},filters)。這樣的頁(yè)面上的兩個(gè)filters的確也清空了。但是如果我在js里面新增了別的filters并沒(méi)有綁定到dom上。比如我還想有個(gè)參數(shù)filters.name。那樣使用Object.assign({},filters)。實(shí)際上是清楚不掉這個(gè)name的值的。

還是一個(gè)個(gè)循環(huán)清除對(duì)象吧

const clearFilters(filters) {
    for (const key in filters) {
      if (filters.hasOwnProperty(key)) {
        delete filters[key];
      }
    }
}

調(diào)用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="請(qǐng)輸入機(jī)構(gòu)"
            @select="handleSelect"
          />
        </el-form-item>
      <el-form-item label="" prop="status">
        <el-select
          v-model="filters.status"
          placeholder="請(qǐng)選擇啟用狀態(tài)"
          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:'機(jī)構(gòu)1',orgCode:'1'},
{orgName:'機(jī)構(gòu)2',orgCode:'2'},
{orgName:'機(jī)構(gòu)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;
};
//訪問(wèn)接口
const getTableList = () => {
  let param= {param:{...filters} };//這里后端希望如果沒(méi)有搜索條件就傳個(gè)空對(duì)象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) 這里可能導(dǎo)致filters.orgCode沒(méi)有清除掉
 // filters={} 這里會(huì)導(dǎo)致頁(yè)面失去響應(yīng)式。清除內(nèi)容后再去回填選擇不上的問(wèn)題
  clearFilters(filters)  //使用這個(gè)才正確
  console.log("filters",filters)
  formRef.value.resetFields();
  getTableList();
};
 const clearFilters(filters) {
    for (const key in filters) {
      if (filters.hasOwnProperty(key)) {
        delete filters[key];
      }
    }
}

到此這篇關(guān)于vue3中reactive的對(duì)象清空所引發(fā)的問(wèn)題解決方案(清空不了和清空之后再去賦值就賦值不了)的文章就介紹到這了,更多相關(guān)vue3 reactive賦值問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: