项目场景:

后端返回数据,小程序用wx:for循环数据,实现双向绑定提示报Two-way binding does not support complex data paths currently. This two-way binding is ignored


问题描述

model:value不能实现双向绑定,

wxml:

<view><view  wx:for="{{listData}}"  wx:key="true" wx:for-index="i"><view><view>时间:</view><input type="text" model:value="{{item.applyTime}}" data-id="{{i}}" placeholder="请输入时间" /></view><view><view>机构:</view> <input type="text" model:value="{{item.detectionCompany}}" data-id="{{i}}" placeholder="请输入机构" /></view></view>
</view>

解决方案:

添加bindinput方法,实现双向绑定

wxml:

<view><view  wx:for="{{listData}}"  wx:key="true" wx:for-index="i"><view><view>时间:</view><input type="text" model:value="{{item.applyTime}}" data-id="{{i}}" placeholder="请输入时间" bindinput="inputApplyTime"/></view><view><view>机构:</view> <input type="text" model:value="{{item.detectionCompany}}" data-id="{{i}}" placeholder="请输入机构" bindinput="inputDetectionCompany"/></view></view>
</view>

js:

 data: {listData:[],
}//双向绑定数据inputApplyTime:function(e){var applyTime = e.detail.valuevar i = e.currentTarget.dataset.idthis.data.listData[i].applyTime = applyTimethis.setData({listData: this.data.listData})},inputDetectionCompany:function(e){var detectionCompany = e.detail.valuevar i = e.currentTarget.dataset.idthis.data.listData[i].detectionCompany = detectionCompanythis.setData({listData: this.data.listData})},

数据双向绑定Two-way binding does not support complex data paths currently. This two-way binding is ignored相关推荐

  1. Vue数据双向绑定原理(vue2向vue3的过渡)

    众所周知,Vue的两大重要概念: 数据驱动 组件系统 接下来我们浅析数据双向绑定的原理 一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...

  2. Angular数据双向绑定

    本文转载自: http://www.cnblogs.com/jingwhale/p/5117419.html 作者:jingwhale 转载请注明该声明. Angular数据双向绑定 AngularJ ...

  3. EngJS(超轻量) 中数据双向绑定如何使用

    Eng github 所有支持数据双向绑定的js工具 ,触发双向关系的基本方式无外乎 wather关系 和  事件关系 两种 . 前者操作数据时 ,后者触发事件时. 下面简单 的介绍Eng 中 的 w ...

  4. 小猿圈解析vue数据双向绑定的缺点

    vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...

  5. vue中通过数据双向绑定给video标签的src赋值,只有第一次有效,怎么解决?

    场景:在一个视频列表页面,点击视频列表,则全屏播放视频.全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签,如下: <video con ...

  6. 数据双向绑定_手把手教你用JavaScript如何实现数据双向绑定

    近几年前端技术栈真是发展的太迅速了,从以前的针对dom操作的框架如jquery,ext.js等框架逐步过渡到当前的mvvm模式,让前端开发者将注意力从dom操作逐渐解脱出来,专注于逻辑的实现,个人认为 ...

  7. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  8. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  9. 小程序input实现数据双向绑定

    小程序input实现数据双向绑定 最终效果 index.wxml index.js 最终效果 index.wxml <view class="uploader">< ...

最新文章

  1. 页面加载后如何使JavaScript执行?
  2. image和TFRecord互相转换
  3. 如何在Ubuntu中安装java jdk
  4. 攻防世界-Misc-stegano(巨详细.零基础)
  5. 转盘在转动的同时ajax异步加载,用jQuery旋转插件jqueryrotate制作转盘抽奖.pdf
  6. Kubernetes应用部署模型解析(原理篇)
  7. 判断对象是否存在某个属性
  8. FTP服务器构建与维护,ftp服务器的搭建与三种访问途径
  9. mysql 开发复制协议_MySQL组复制MGR(一)– 技术概述
  10. Python中map的使用方法
  11. getAttribute 与getParmeter 区别
  12. webservice 参数太大_webservice大数据
  13. 神经网络模型怎么建立,如何选择神经网络模型
  14. C#枚举(Enum)
  15. SPSS应用多元逻辑回归解决无序多分类问题
  16. C语言实验——圆周率 sdut oj
  17. 剑客之剑系列续篇:六脉神剑——PyCharm使用宝典
  18. div html表格样式设置字体大小,css样式表中如何修改字体大小为18px?
  19. 《软件工程》实验个人报告,南风银行ATM自动柜员机 开发总结报告; 滁州学院课程
  20. Electron修改窗口标题

热门文章

  1. 虚拟机登录时输入密码正确,进入界面后黑屏闪退回登陆界面,死循环问题,已解决
  2. 编写一个shell脚本,可以在屏幕上打印出笛卡尔曲线
  3. IT求职部分网站汇总
  4. Ubuntu乱码显示为菱形
  5. window7无法使用vlc客户端_解决libVLC无法响应鼠标消息
  6. Spark技术在京东智能供应链预测的应用
  7. Clover 的使用方法解读
  8. matlab中norm(e),MATLAB中norm()的用法
  9. 笔记本电脑蓝屏错误WHEA_UNCORRECTABLE_ERROR
  10. C++模板编程(16)---继承与类模板(Derivation and Class Templates)