vue项目问题_this.$refs.searchform是什么意思-优快云博客

本文链接：https://blog.youkuaiyun.com/deerreedhu/article/details/126714693

在Vue项目中，作者遇到一个挑战：需要根据select组件的值动态展示表格内容。最初尝试通过getElementById获取select值，但发现这种方法只适用于首次加载后，改变select值时无法实时更新。为了解决这个问题，作者转向使用$refs来直接引用组件的值，将所有搜索框的值绑定到form对象上，从而实现动态更新表格。这种方法避免了跨页面操作，并确保了组件状态的实时同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取搜索组件中某个搜索的值

项目中有一个有许多select组成的组件，其中需要根据某个select的值展示表格不同内容，所以需要获得组件中这个select的值，踩了很多坑！！！

//组件
<SearchHeader
        v-model="form"
        ref="search"
        :limit.sync="limit"
        :key-list="keyList"
        credit-type="GROUP_CREDIT"
        @keyup.enter.native="handleSearch"
        @search="handleSearch"
 />

踩坑

 async handleSearch(flag){
	//获取数据业务代码
	.......
	var param =document.getElementById("pid");
	var currencyshow = param.currencyshow;
	const { data } = await queryGroupList(query);

//筛选表格
```javascript
....//获取表格表头columns1
if(val === "1"){
  console.log('jjjjj---:',val);
  this.columnTable=columns1.filter(col=>col.isshow ==="one" || col.isshow ==="show");
 }else if(val === "2"){
   this.columnTable=columns1.filter(col=>col.isshow ==="two" || col.isshow==="show");
  }else this.columnTable =columns1;
....
}

这种方法虽然有效，但是确实一次性的，初次页面无法渲然，只有点击查询按钮之后才能渲染页面，但是当改变select值时页面无法生效（不清楚原因），并且使用getElementById只能在await获取数据接口前，否则无法生效

解决方法

尽量减少跨页面使用getElementById函数，使用$ref效果十分不错

const params = this.$refs.search.form; 
 var val= this.$refs.search.form.currencyshow;

即将所有搜素框的值绑定在form上（一起打包发送给后端）