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

这篇具有很好参考价值的文章主要介绍了微信小程序form页面数据双向绑定data路径。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述:

在开发过程中数据经常以对象方式组织,对页面修改数据进行保存时使用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>

欢迎大家交流探讨文章来源地址https://www.toymoban.com/news/detail-546221.html

到了这里,关于微信小程序form页面数据双向绑定data路径的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序的双向数据绑定和vue的哪里不一样?下拉刷新的方式代码示例

    小程序的双向数据绑定和Vue的双向数据绑定有一些不同之处。 实现方式:小程序的双向数据绑定采用的是数据劫持的方式,通过重写对象的get和set方法来监听数据的变化和更新视图。而Vue使用的是响应式数据的方式,通过使用Object.defineProperty()方法来劫持对象的属性。 语法差

    2024年02月22日
    浏览(37)
  • 微信小程序实现双向绑定

    简易双向绑定 在 WXML 中,普通的属性的绑定是单向的。例如: 如果需要在用户输入的同时改变 this.data.value ,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 model: 前缀: 用于双向绑定的表达式有如下限制: 只能是一个单一字段的绑定,如: 目前,尚不能 data

    2024年02月06日
    浏览(29)
  • 微信小程序在data中定义页面的数据,以及数据如何使用

    以上代码是一个小程序页面的示例代码,使用了 Page() 方法来定义页面组件。在该页面组件中,定义了一个名为 data 的对象,该对象中包含两个属性: info :表示一个字符串类型的数据,其初始值为 \\\'init data\\\' 。 msgList :表示一个数组类型的数据,其初始值为 [{msg: \\\'hello\\\'}, {ms

    2024年02月04日
    浏览(39)
  • 微信小程序复杂对象的双向绑定(附代码可直接使用)

    最近在小程序的开发过程中,遇到一个需求,需要绑定一个list到自定义表单组件,组件根据列表渲染表单,表单的值需要和父组件双向绑定。 但是这里却出现了问题,本人先使用vue的方式将list直接做整体绑定。 结果在子组件内部使用setData对list的属性做出变更时直接报错栈

    2024年02月09日
    浏览(51)
  • uniapp 微信小程序:v-model双向绑定问题(自定义 props 名无效)

    VUE中父子组件传递数据的基本套路: 父传子 props 子传父 this.$emit(\\\'事件名\\\', \\\'数据\\\'); 使用 sync 修饰符,实现 支持同步数据 因为用的是 uniapp 开发小程序,所以要考虑到兼容性问题,不要把自己当正经VUE2。 小程序虽然支持 v-model 指令,但不支持 model 选项。 所以要么子组件中声

    2024年02月15日
    浏览(32)
  • Vue (v-bind指令、el与data的两种写法、理解MVVM、数据代理、V-no事件处理、双向数据绑定V-model、登陆页面实现

    V-no用于监听DOM对象 v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。 按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。 下拉选项实例:

    2024年01月23日
    浏览(44)
  • 微信小程序的跨页面传参以及data-方法的相关细节

    🙂博主:小猫娃来啦 🙂文章核心: 微信小程序的跨页面传参以及data-方法的相关细节 其实在学习新东西的过程中,最快速的方式就是多看官方文档。 很多技术层面的东西,官方文档其实讲的很清楚了。 vue这个渐进式框架在很久以前,是没有多少官方文档供人学习的,但现

    2024年02月11日
    浏览(45)
  • 微信小程序——数据绑定

    在微信小程序中,可以通过以下代码实现数据绑定: 在WXML中,使用双大括号{{}}绑定数据,将数据渲染到对应的视图中。 在JS中,定义一个数据对象,并将其绑定到页面的data属性上。 当数据对象发生变化时,小程序会自动更新相关的视图。 可以通过setData方法在JS中更新数据

    2024年02月07日
    浏览(26)
  • 【微信小程序】数据绑定

    ✅作者简介:CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆 📃个人主页:hacker707的csdn博客 🔥系列专栏:微信小程序🥇 💬个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,

    2024年02月09日
    浏览(28)
  • vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

    本文依旧沿用 ant design vue 组件库和 ts 语言🔥🔥更多内容见Ant Design Vue官方文档 🔥🔥 vue3 antd项目实战——Form表单【后台管理系统 v-model数据的双向绑定,input输入框、Radio单选框的嵌套使用】 在上期文章中,我们完成了 UI界面的渲染 (渲染效果如下图),本期文章将带着大

    2023年04月22日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包