微信小程序form页面数据双向绑定data路径

news/2024/10/28 19:26:27/

问题描述:

在开发过程中数据经常以对象方式组织,对页面修改数据进行保存时使用this.data.obj无法获取修改后数据。

官方文档解释 简易双向绑定

1.只能是一个单一字段的绑定

<input value="{{value}}" />

2.目前,尚不能 data 路径,如

<input model:value="{{ a.b }}" />

这通常不满足我们日常开发需要

解决办法

通过在input框中设置name属性,
然后在函数中使用e.detail.value获取form数据

<form catchsubmit="saveChangeHouse"><view><input hidden="true" name="id" value="{{house.ID}}"/><t-input type="text" name="xmmc"  value="{{house.xmmc}}" label="项目名称" placeholder="请输入项目名称" ></t-input><t-input type="number" name="mj"  value="{{house.mj}}" label="面积(㎡)" placeholder="请输入房屋面积" ></t-input><t-input type="text" name="hx"  value="{{house.hx}}" label="户  型" placeholder="请选择户型" ></t-input><t-input type="text" name="cx" value="{{house.cx}}" label="朝  向" placeholder="请选择朝向" ></t-input><t-textarea label="说  明" name="sm" placeholder="请填写说明"  value="{{house.sm}}"></t-textarea></view><view><t-button  type="submit" data-method="save"theme="light" size="large" style="width: 100%;margin-top: 10px;"  >暂存</t-button></view></form>
Page({/*** 页面的初始数据*/data: {house:{},},saveChangeHouse(e){let method = e.detail.target.dataset.method;let data= {house:e.detail.value,method:method}
})

PS:

网上其他博主使用 model:value绑定,对于data.路径亲测无效

<t-input type="number"   model:value="{{house.mj}}" label="面积(㎡)" placeholder="请输入房屋面积" ></t-input>

欢迎大家交流探讨


http://www.ppmy.cn/news/629299.html

相关文章

elementui el-table-column表头换行,自定义表头以及排序图标的位置放置

目录 1、普通表头换行⭐️想实现以下效果 2、表头换行时调整文字和排序图标的位置⭐️想实现以下效果遇到问题 效果如下遇到问题 效果如下⭐️最终成功实现以下效果 &#x1f44d;写在最后 1、普通表头换行 https://www.jb51.net/article/228935.htm // 在需要换行的地方加入换…

linux目录字段大于2,【Linux学习】— 2. 文件/目录的常规操作

主要来源&#xff1a;兄弟连Linux视频教学、Linux操作与生物信息——基因学苑 2021.2.16 1. 进入目录 1.1 显示当前目录 pwd 1.2 进入某一特定目录 cd 常用选项&#xff1a; -&#xff1a;回到上次操作目录 ..&#xff1a;返回上一层目录 cd不接任何选项和参数则回到家目录 2.…

Git_命令大全

命令分类 设置和配置 获取和创建项目 基本快照 分支和合并 git config help init clone add status diff commit reset rm mv branch checkout merge mergetool log stash tag worktree 共享和更新项目 检查和比较 修补 调试 …

Python环境搭建—安利Python小白的Python和Pycharm安装详细教程

人生苦短&#xff0c;我用Python。众所周知&#xff0c;Python目前越来越火&#xff0c;学习Python的小伙伴也越来越多。最近看到群里的小伙伴经常碰到不会安装Python或者不知道去哪下载Python安装包等系列问题&#xff0c;为了方便大家学习Python&#xff0c;小编整理了一套Py…

HTML知识点总结还涉及一些subline的基本操作(有很多不足,现为初学者,以后补充)

标题一&#xff1a;HTML课堂笔记 文档结构说明(文档类型声明) 有7种文档类型 HTML4.0-4.1 strict&#xff0c;Transitional&#xff0c; Formset html:xt/xs;对应严谨的或者不严谨的 严谨的HTML文档&#xff0c;可以丢一些东西&#xff0c;浏览器可以识别 XHTML1.0 strict&am…

phpstorm2019安装和使用

http://www.3322.cc/soft/50361.html PhpStorm 2019专门用户制作PHP集成开发软件&#xff0c;全新的版本拥有许多改变。有了这款软件&#xff0c;你就可以随时随地的对编码进行更改编辑。拥有最智能的javascript编辑器&#xff0c;提供代码完成、验证和快速修复、重构、JSDoc类…

html css javascript

结构 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>文档标题</title> </head> <body> <h1>我是第一个标题</h1> <p>我是第一个段落。</p> </body> </html…

1.Linux命令行使用技巧

1.Linux命令行使用技巧 1.什么是linux&#xff1f; GNU/Linux是Linux的全称&#xff0c;GNU是开源组织&#xff0c;Linux是指Linux内核。 内核&#xff1a;系统核心程序&#xff0c;相当于人的大脑&#xff0c;负责系统程序和硬件分配及调度。 2.什么是shell&#xff1f; shel…