问题描述:
在开发过程中数据经常以对象方式组织,对页面修改数据进行保存时使用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>
欢迎大家交流探讨