关于搜索栏双向绑定出错问题

最新推荐文章于 2023-12-11 19:33:57 发布
原创 最新推荐文章于 2023-12-11 19:33:57 发布 · 293 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #es6

我们一帮都会给搜索栏进行双向数据绑定,然后点击搜索之后,把表单的数据,当做参数发起请求,

但是这样会出现一种情况:当我们在搜索栏输入了内容,但是没有点击搜索,这个时候切换当前的分页,就会出现默认搜索当前的值的情况,

解决方案 :,表单绑定的值和发送的请求,使用不一样的参数

 当点击了搜索按钮,把表单的值赋值给API,如果没有点击搜索,则不会携带表单的数据

        this.API = { ...this.fromData }
        this.API.chkState = undefined
        this.fnchoice()//发起请求
--------------------------------------------
 const res = await choice(this.API)//发起ajax请求.参数是this.API
        console.log('fnchoice', res)
        this.alllist = res.data.items
        this.counts = res.data.counts

注意我的用法,我没有直接把this.fromData 赋值给API.而是解构之后,在赋值的,

原因是,直接赋值,虽然第一次可以解决分页的问题.但是当你点击的搜索按钮之后,再在搜索框输入查询值不点击搜索,这时候点击分页时,还是会查询搜索框中的值,所以不能直接赋值地址

6、构建首个 Xamarin.Forms 应用
i3j4k5的博客
10-06 14
本文详细介绍了如何使用Xamarin.Forms构建一个待办事项应用，涵盖MVVM架构、数据绑定、页面导航、列表展示、状态颜色转换、上下文命令等核心功能的实现。通过分步讲解与代码示例，帮助开发者掌握Xamarin.Forms的基础开发流程，并提供代码优化建议与功能扩展思路，适合初学者快速上手跨平台移动应用开发。
前端面试常见的问题（呕心沥血的总结）
weixin_43714543的博客
03-22 4217
直通金三银四，你学废了吗？1. JS的数据类型哪些?2. 变量的命名规则3.转换规则4. this的指向5.改变this指向的方式6.new操作符做什么?7.什么ajax,它的5个步骤8. get与post请求的区别?9. 什么cookie?10. cookie localStorage,sessionStorage 的区别?11. 闭包?12. 原型和原型链13. ES5 新增了哪些特性?14.es6有哪些新特性,你喜欢哪些特性? (重点的重点)15.什么是回调函数16.面向对象16.设计模式 GoF1
解决Flex4双向绑定因数据类型不同而出现编译错误问题
maliu's code
03-04 1149
以下内容转载自 http://www.iyoya.com/2011/06/24/two-way-data-binding-problem.html 正文： 在flex4以前如果要实现双向数据绑定就必须为数据源和目录对象进行交互绑定，而flex4后实现了双向数据绑定新的快速方法，如下所示： 1、组件中绑定 <s:Application xmlns:fx="http://ns.adobe
探讨vue的双向绑定v-model在项目中的条件搜索遇到的问题
云中客的博客
12-29 2164
      vue的v-model是一个非常好用的双向绑定指令，不难想象因为它帮我们简化了多少逻辑代码。但在最近，测试反馈给我一个问题：在搜索时，只填搜索内容而不点击搜索按钮，接着点击翻页，会有报错说该条件下的搜索结果不存在（就是如下的巨简单无奇的搜索框）。       这里我先说明一下我们项目的搜索和分页机制。我们项目的分页是我们在每次点击页码，将页码数字和各种搜索条件传给后端，再将后端的...
Vue3v-model 实现对表单元素的双向绑定
qq_65142821的博客
12-11 572
写一个搜索框，点击搜索，控制台打印相同的内容，并且点击下方的内容时候 输入框也会填入相应的数据。
vue基础 - 02 （双向数据绑定、实时监听输入框、键盘事件监听、watch监听器、单选框、下拉选框、多选框、多选框单独使用、动态样式class/style）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-03 1212
1、双向数据绑定 方向1 - 数据绑定到DOM元素上 方向2 - DOM变化更新绑定的数据 表单元素：输入框，单选框，多选框...，用户可以操作来修改其值 -- 把用户操作的值更新给数据 v-model：数据绑定值的同时，DOM变化也会修改变量，用来快速获取form表单元素的值 2、实时监听输入框 @input：输入框内容变化时触发 <div id="app"> &...
ThorUI组件库,微信小程序项目代码分享,组件文档地址:https://www.thorui.cn/doc。最近更新时间:2021-01-19 - dingyong0214 / ThorUI
01-26
ThorUI ThorUI组件库小程序原生版本，该开源版源码为V1.4.2版本，后续更新版本付费会员才可使用（￥120/永久）【线上最新版为V1.6.1】。 微信小程序 H5二维码 QQ小程序 Android App ThorUI示例 网站介绍 ThorUI组件文档 交流群 QQ群1：745733024 QQ群2：881906325 QQ群3：605135318 QQ群4：928308676 会员群：加入会员可进 更新日志 V1.6.1 （2021-01-19） 【ThorUI组件库V1.6.1】更新： 1.商城模板更新： 1）商城模板拆分成单独模板项目。 2）个人中心，新增未登录状态。 3）个人信息页面操作优化。 4）编辑地址页面优化，新增省市区城市选择。 5）新增我的钱包页面。 6）新增充值确认页面。 7）新增我的银行卡页面。 8）新增交易记录页面。 9）商品详情页分享优化，新增生成分
数据绑定技术在产品管理系统中的应用
### 数据绑定技术在产品管理系统中的应用 在产品管理系统的开发中，数据绑定是一项关键技术，它能让我们将数据集中的记录与表单上的控件进行有效绑定，实现数据的展示和交互。本文将详细介绍数据绑定的相关概念和...
Nginx变更HTTP2配置过程记录
企业实战系列集 ●●● https://ximenjianxue.blog.youkuaiyun.com
08-26 6462
背景 最近，业务平台受客户反馈，登录响应很慢，达到50s左右，虽然平台带宽又1G，但是用户上传文件到平台的速率只有40Kb/s左右，业务正常使用受影响严重。 经与研发侧同事沟通，考虑采用http2，因http2再nginx中相较于http1具备较大优势： 环境检查 相关资料表明：openssl的版本必须在1.0.2e及以上、nginx的版本必须在1.9.5以上 如果没有安装的话： ./configure --prefix=/usr/local/nginx --with-openssl=../openss
USB描述符配置出错？自定义VID_PID调试全过程记录（仅限专业人士）
[USB描述符配置出错？自定义VID_PID调试全过程记录（仅限专业人士）](https://mischianti.org/wp-content/uploads/2021/09/ESP32-compiled-binary-hex-with-command-line-and-GUI-tool-1024x552.jpg) # 1. USB协议...
Layui带搜索的下拉框的使用以及动态数据绑定方法
12-13
说起下拉框大家一定不陌生，就是放着指定内容的容器需要什么就直接选择就可以了，很方便。但是凡事都有利弊两面，在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花，影响用户体验。所以就有了带查询的下拉框出现，这个下拉框的功能很强大，结合了输入框和下拉框为一体，既可以进行模糊查询，又可以直接选择，比以前的下拉框更加方便了。今天要介绍的就是layui的form表单组件里的带查询的下拉框。 用任何插件都需要引用相应的css文件和js文件，在这就不多说了。但layui的form表单组件不仅要引用插件还需要加载相应的模块，少了这两步操作，select、checkbox、radio等将无法显示，并且无法
uniapp——使用thorUI的组件（教程）
wy313622821的博客
12-08 5122
使用thorUI的组件（教程） 这里以thorUI控件中的顶部提示消息来做演示教程 先看效果图： 项目结构： 如何部署接入thorUI： 1、把tui-tips.vue复制到components 2、在pages.json中加入如下代码： "easycom": { "autoscan": true, "custom": { "tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue" } }, 加了后的代码 3、index.vue的代码为
el-select下拉框多选远程搜索反显
gaoyu007的博客
07-22 2220
el-select下拉框多选远程搜索反显
如何使用vue实现搜索输入框实时查询显示
浮生离梦的博客
01-04 1万+
一、需求问题 在vue的项目中，经常会遇到搜索输入框的需求。当我们未输入内容，搜索输入框下面不显示内容。当我们输入内容以后，搜索输入框会实时显示，下面会实时显示搜索出来的内容。这个需求也是比较常见的。 二、需求分析 针对这个需求，我们可以先想到需要用到双向数据绑定，对input输入框应用v-model，绑定的值可以设置为keyword。同时，为了数据发生改变以后，能够实时的监听到，可以使用watc...
uni-app使用input框 v-model双向绑定不起作用解决方案
Xinacridine的博客
01-11 6862
<input type="text" @input="inputs" value="" placeholder="请输入金额" v-model="number" /> <script> export default { data() { return { number: '', } }, methods: { // 可提现金额显示 inputs(e) { var mon = e.detail.value if (Numb
【vue】vue双向数据绑定的原理解析及代码实现_04
青春木鱼的博客
06-07 1191
vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。......
Vue2 数据绑定，使用过滤器实现的搜索框功能
每一个不曾起舞的日子，都是对人生的辜负。
01-30 1282
示例程序 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript" src="Vue-v2.5.22.js"&gt;&lt;/script&am
vue搜索框的功能实现
热门推荐
m0_51459514的博客
03-30 2万+
1.搜索框和按钮 <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList"> <el-button slot="append" icon="el-icon-search" @click="getUserList" ></el-button> </el-input> 2.数据的双向绑定，通过查询参数进行搜索 v-model="query
JS实现搜索框绑定回车键示例
fishineye的专栏
11-29 7727
window.onload = function(){   } function check() { var bt = document.getElementById("bt"); var key = event.keyCode; if (key == 13)     bt.click();        } function test() { var txtV
import { IBestNavBar, IBestSideBar, IBestSideBarItem,IBestPopup} from "@ibestservices/ibest-ui-v2"; import { FirstCateData, SecondCateData } from '../../api/Index' import { AxiosResponse } from '@ohos/axios' import { SeondCateId, FirstCate,ScondCate } from '../../interface/pord' import log from '@open/log' @ComponentV2 export struct Cate { router = this.getUIContext().getRouter() @Local visible: boolean = false @Local list: FirstCate[] = [] @Local groupId: string = "group" @Local active: number = 0 @Local secondList:ScondCate[]= [] // 存储二级分类数据 @Local proName:string='' firstcate = async () => { try { let res: AxiosResponse = await FirstCateData() this.list = res.data // 默认加载第一个分类的二级数据 if (this.list.length > 0) { this.secondcate({categoryId: this.list[0].id }) } } catch (error) { log.error("获取一级分类失败:", error) } } secondcate = async (params: SeondCateId) => { try { const queryParams:SeondCateId = { categoryId: params.categoryId } let ite: AxiosResponse = await SecondCateData(queryParams) this.secondList = ite.data // log.info(this.secondList) } catch (error) { log.error("获取二级分类失败:", error) } } handleCategoryClick(index: number) { this.active = index if (this.list[index]) { const params:SeondCateId={ categoryId:this.list[index].id } this.secondcate(params) } } aboutToAppear(): void { this.firstcate() } @Builder centerBuilder() { Column(){ IBestNavBar({ title: "搜索中心", titleColor: "#fff", titleFontSize: 24, titleFontWeight: FontWeight.Bold, navBarBgColor: "#476ce3", isShowLeft: true, leftIconSize:30, navBarHeight:60, leftIconColor:'#fff', onLeftClick:()=>{ this.visible=false } }) Row(){ TextInput({placeholder:'请输入商品名....',text:$$this.proName}) .width('80%') .contentType(ContentType.USER_NAME) Button('搜索') .backgroundColor('blue') .fontColor('#fff') .type(ButtonType.Normal) .width(70) .height(40) .onClick(()=>{ this.visible=false this.router.pushUrl({ url:"pages/Product", params:{ proName:this.proName } }) }) } .width('100%') .margin({ top:10 }) Row(){ Text('清空搜索记录') .fontSize(30) .fontColor('#cfcfcf') Image($rawfile('img/del.png')) .width(30) .height(30) } .width('100%') .justifyContent(FlexAlign.SpaceBetween) .border({ width:{ bottom:'2' }, color:"#cfcfcf" }) .margin(10) } .margin({ top:40 }) .width('100%') .height('100%') } build() { Column() { // 顶部导航栏 IBestNavBar({ title: "乐淘云购", titleColor: "#fff", titleFontSize: 24, titleFontWeight: FontWeight.Bold, navBarBgColor: "#476ce3", isShowLeft: true, leftIconSize: 30, leftIconColor: '#fff', onLeftClick: () => { this.router.back() }, navBarHeight: 60, rightIcon: $rawfile('img/search.png'), onRightClick:()=>{ this.visible = true }, isShowRight: true, rightIconSize: 30 }) // 主内容区 Row() { // 左侧导航栏 - 修复左对齐 Column() { IBestSideBar({ groupId: this.groupId, active: this.active, sideWidth:'100%', maxHeight:'100%', }) { ForEach(this.list, (v: FirstCate, index: number) => { IBestSideBarItem({ groupId: this.groupId, index: index, title: v.categoryName, onItemClick: () => this.handleCategoryClick(index) }) }) } } .width('30%') .height('100%') .backgroundColor("#fff") .border( { width:{ right:2 }, color:"#fff" }) // 右侧内容区 Scroll() { Column() { // 二级分类网格布局 Grid() { ForEach(this.secondList, (item:ScondCate) => { GridItem() { Column(){ // 分类图标 - 使用占位图 Image(item.brandLogo) .width('100%') .height(120) .objectFit(ImageFit.Fill) // 分类名称 Text(item.brandName) .fontSize(18) .textAlign(TextAlign.Center) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .width('100%') .height(140) .onClick(() => { this.router.pushUrl({ url:"pages/Product", params: { proName:item.brandName } }) }) } }) } .maxCount(2) .layoutDirection(GridDirection.Row) .columnsTemplate('1fr 1fr') .width('100%') .height('100%') } .width('100%') } .width('70%') .scrollBarWidth(2) } .layoutWeight(1) .height('100%') .width('100%') IBestPopup({ visible: this.visible, popupWidth: '100%', popupHeight:'100%', contentBuilder: this.centerBuilder }) } .width('100%') .height('100%') .backgroundColor("#f5f7fa") } }为什么点搜索日志报错？
最新发布
07-30
<think>我们分析问题：点击搜索按钮时，日志报错。根据提供的代码，搜索按钮的点击事件处理函数如下： ```typescript Button('搜索') .onClick(() => { this.visible = false; this.router.pushUrl({ url: "pages/Product", params: { proName: this.proName } }); }) ``` 报错可能的原因： 1. **`this.proName` 未正确绑定**：在TextInput中，我们使用`$$this.proName`进行双向绑定，但需要确认是否在组件中正确声明了`proName`。在代码中，我们确实有`@Local proName: string = '';`，所以声明没有问题。 2. **路由跳转问题**：可能`pages/Product`页面不存在，或者路由配置不正确。但根据之前代码，我们假设路由配置正确。 3. **日志报错的具体内容**：由于没有提供具体的错误信息，我们需要检查可能出现的错误。 4. **TextInput的双向绑定问题**：在HarmonyOS ArkUI中，使用`$$`进行双向绑定需要配合`@State`或`@Local`等装饰器。这里使用的是`@Local`，应该是可以的。但是，注意在TextInput中，我们使用了`$$this.proName`，这里的`this`指向是否正确？ 在`centerBuilder`中，我们使用了`$$this.proName`，这个`this`指向的是当前组件实例吗？在ArkUI中，`@Builder`函数内部的`this`指向的是当前组件实例，所以应该可以访问到`proName`。 但是，在`centerBuilder`中，我们使用`TextInput`的代码是： ```typescript TextInput({placeholder:'请输入商品名....',text:$$this.proName}) ``` 这里使用`$$this.proName`进行双向绑定，当输入时，`this.proName`应该会更新。然后在按钮点击时，我们使用`this.proName`作为参数传递。 **可能的问题**：在`centerBuilder`中，`this`的指向问题。因为`centerBuilder`是一个函数，它被传递给`IBestPopup`的`contentBuilder`属性。在构建时，`this`应该指向当前组件实例，因为它是组件的成员函数（使用`@Builder`装饰）。所以，理论上没有问题。 **但是**，在ArkUI中，如果使用`this`，需要确保在构建时`this`确实指向组件实例。我们可以通过打印日志来检查。 **建议的调试步骤**： 1. 在`centerBuilder`中，尝试打印`this`，看是否是组件实例。 2. 在按钮点击事件中，打印`this.proName`，看是否获取到了输入的值。 如果打印发现`this`不是组件实例，那么可能是作用域问题。在ArkUI中，为了避免作用域问题，我们通常使用箭头函数来确保`this`指向正确。 但是，在`@Builder`函数内部，`this`应该指向组件实例。如果发现不指向组件实例，我们可以通过以下方式解决： - 在组件中定义一个指向组件实例的变量，例如`self = this;`，然后在`centerBuilder`中使用`self.proName`。 但是，由于`@Builder`函数是组件的方法，所以直接使用`this`应该没问题。 **另一种可能**：在点击按钮时，`this.proName`可能为空，但不会导致报错，除非在目标页面中处理参数时出错。 **错误日志分析**：我们需要具体的错误信息。如果错误发生在路由跳转时，可能是目标页面在接收到`proName`参数时处理不当。 例如，在`pages/Product`页面中，我们通过`this.router.getParams()`获取参数，并赋值给`proName`。如果获取参数的方式不对，可能会导致错误。 **总结**：由于没有具体错误信息，我们只能推测。建议在目标页面（Product）的`aboutToAppear`或`onPageShow`中打印接收到的参数，确保参数正确传递。 另外，在搜索按钮的点击事件中，我们可以先打印`this.proName`，确保有值，然后再跳转。 修改代码，添加日志： ```typescript Button('搜索') .onClick(() => { log.info(`搜索关键词：${this.proName}`); // 添加日志 this.visible = false; this.router.pushUrl({ url: "pages/Product", params: { proName: this.proName } }); }) ``` 然后在控制台查看日志输出，确认`this.proName`是否有值。 如果日志显示`this.proName`为`undefined`，则说明双向绑定没有成功。这时，我们需要检查双向绑定的方式。 在ArkUI中，TextInput的双向绑定可以这样写： ```typescript TextInput({ placeholder: '请输入商品名....', text: $$this.proName }) ``` 或者，也可以使用自定义组件变量，但这里我们使用的是组件的`@Local`变量，所以应该可以。 **另一种写法**：如果不确定双向绑定，可以改为事件监听的方式： ```typescript TextInput({ placeholder: '请输入商品名....' }) .onChange((value) => { this.proName = value; }) ``` 这样，当输入变化时，我们手动更新`this.proName`。 **修改建议**： 将TextInput的绑定改为事件监听方式： ```typescript TextInput({placeholder:'请输入商品名....'}) .onChange((value:string)=>{ this.proName=value; }) ``` 然后再次测试。 如果问题仍然存在，请提供具体的错误日志。 **注意**：在`centerBuilder`中，我们使用了`$$this.proName`，如果这种方式在Popup中不生效，可能是因为Popup的内容构建时机或上下文问题。改为事件监听方式更可靠。 因此，我们修改`centerBuilder`中的TextInput部分： ```typescript Row(){ TextInput({placeholder:'请输入商品名....'}) .width('80%') .contentType(ContentType.USER_NAME) .onChange((value: string) => { this.proName = value; }) Button('搜索') .backgroundColor('blue') .fontColor('#fff') .type(ButtonType.Normal) .width(70) .height(40) .onClick(()=>{ this.visible=false this.router.pushUrl({ url:"pages/Product", params:{ proName:this.proName } }) }) } ``` 这样，无论双向绑定是否存在问题，我们都能确保输入的值被正确赋值给`this.proName`。 **最后**：如果问题解决，则说明之前双向绑定可能存在问题；如果问题依旧，则需要查看具体的错误日志。 由于问题描述中没有具体错误信息，我们只能给出这些可能的解决方案。</think>根据您提供的代码，点击搜索按钮时日志报错的原因可能有以下几点： ### 主要原因分析： 1. **TextInput 双向绑定问题**： ```typescript TextInput({placeholder:'请输入商品名....',text:$$this.proName}) ``` HarmonyOS 的 `$$` 双向绑定语法在 TextInput 中使用时，**必须配合 `@State` 装饰器**，而您使用的是 `@Local` 装饰器： ```diff - @Local proName:string='' + @State proName:string='' ``` `@Local` 装饰器不支持双向绑定，会导致状态更新异常。 2. **路由参数传递问题**： 在搜索跳转时传递的参数格式不正确： ```typescript this.router.pushUrl({ url:"pages/Product", params:{ proName:this.proName } }) ``` 目标页面 `Product` 需要通过 `router.getParams()` 获取参数，但您没有处理参数类型转换： ```typescript // Product.ts const routeParams = this.router.getParams() as ProNameId; // 类型断言可能失败 ``` 3. **页面栈管理问题**： 多次打开/关闭弹出层可能导致路由状态异常： ```typescript this.visible = true/false // 弹出层状态切换 ``` ### 完整修复方案： ```typescript @ComponentV2 export struct Cate { router = this.getUIContext().getRouter() @Local visible: boolean = false @Local list: FirstCate[] = [] @Local groupId: string = "group" @Local active: number = 0 @Local secondList: ScondCate[] = [] // 修复1：改用@State支持双向绑定 @State proName: string = '' // ...其他方法保持不变... @Builder centerBuilder() { Column(){ // ...导航栏代码... Row(){ // 修复2：使用@State后双向绑定生效 TextInput({placeholder:'请输入商品名....', text: $$this.proName}) .width('80%') Button('搜索') .onClick(() => { this.visible = false // 修复3：添加参数校验 if (this.proName.trim() === '') { // 添加空值提示 prompt.showToast({ message: "请输入搜索内容" }) return } this.router.pushUrl({ url: "pages/Product", params: { proName: this.proName } }) }) } // ...其他代码... } } // ...build方法保持不变... } ``` ### 目标页面接收参数优化 (Product.ts)： ```typescript // 修复4：安全获取路由参数 const routeParams = this.router.getParams(); const proName = routeParams?.proName?.toString() || ''; // 安全转换 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值