使用表单组件时 例如在form内使用input 未实时绑定到数据实体中

发布于 6 年前作者 ayi5236 次浏览最后编辑 6 年前来自 ask

前提条件:fom表单封装在一个组件里了,在其他的页面引用的这个组件 框架使用了wepy

使用表单组件时 例如在form内使用input 未实时绑定到数据实体中

from内嵌套了input和picker,input绑定了初始的value值,

1修改input的内容

2点击picker并变更picker内容,

3然后页面内有内容是根据wx:if控制显示的,触发了页面渲染,原来的input内容就无效了。

预期是 页面的被wx:if控制的内容显示后,input还是原来的值

bug表现是  input显示值恢复成最初的value绑定值

你想反馈一个 Bug 还是 提一个需求?

如果是 Bug:

* Bug 表现是什么?预期表现是什么?

* 如何复现?

* 提供一个最简复现 Demo

如果是需求:

* 你希望有什么能力?

* 你需要这个能力的场景是 ?

6 回复
yeli
yeli2 楼6 年前

上面这位兄弟复制我的代码干啥呢

cdu
cdu3 楼6 年前
<template>
  <view class="container">
    <view class="zan-panel">
      <view class="weui-form-preview__bd">
        <view class="weui-form-preview__item">
          <view class="weui-form-preview__label">
            <div class="dudu_labelStyle">订单处理流程:</div>
            <div class="dudu_contextStyle"></div>
          </view>
        </view>
      </view>
      <approveHistory :steps.sync="formProps" :hasDesc.sync="true" :type.sync="vertical"></approveHistory>
    </view>
    <view class="zan-panel">
      <view class="weui-form-preview__bd">
        <view class="weui-form-preview__item">
          <view class="weui-form-preview__label">
            <div class="dudu_labelStyle">订单业务信息:</div>
            <div class="dudu_contextStyle"></div>
          </view>
        </view>
      </view>
    </view>
    <orderInfoTemplet :businessInfo.sync="businessInfo"></orderInfoTemplet>
    <!-- 渲染各个批准流程的组件 -->
    <!-- 优惠审核 -->
    <view wx:if="{{ formKey == 'benefit.form' }}" class="zan-panel">
      <view class="weui-form-preview__bd">
        <view class="weui-form-preview__item">
          <view class="weui-form-preview__label">
            <div class="dudu_labelStyle">优惠审核:</div>
            <div class="dudu_contextStyle"></div>
          </view>
        </view>
      </view>
      <benefitApproveForm :taskId.sync="taskId" :con_data.sync="con_data"></benefitApproveForm>
    </view>
    <!-- 商务审核 -->
    <view wx:if="{{ formKey == 'business.form' }}" class="zan-panel">
      <view class="weui-form-preview__bd">
        <view class="weui-form-preview__item">
          <view class="weui-form-preview__label">
            <div class="dudu_labelStyle">商务审核:</div>
            <div class="dudu_contextStyle"></div>
          </view>
        </view>
      </view>
      <businessApproveForm :taskId.sync="taskId" :con_data.sync="con_data"></businessApproveForm>
    </view>
  </view>
</template>
<script>
import wepy from 'wepy';
import util from "../../../utils/util";
import wxRequest from "../../../utils/wxRequest";
import { CglobalData } from "../../../utils/constant";
import Tips from "../../../utils/tip";

...

luona
luona4 楼6 年前
<template lang="wxml">
  <view>
    <form bindsubmit="formSubmit" bindreset="formReset">
      <view class="zan-panel">
        <view class="zan-cell zan-field">
          <view class="zan-cell__hd zan-field__title">首付</view>
          <view class="zan-field__input zan-cell__bd">
            <input name="downPayment" type="number" value="{{submitData.orderPlanAttr_actual.downPayment}}" placeholder="" />
          </view>
          <view class="myInputIcon"></view>
        </view>
        <view class="zan-cell zan-field">
          <view class="zan-cell__hd zan-field__title">月供</view>
          <view class="zan-field__input zan-cell__bd">
            <input name="monthly" type="number" value="{{submitData.orderPlanAttr_actual.monthly}}" placeholder="" />
          </view>
          <view class="myInputIcon"></view>
        </view>
        <view class="zan-cell zan-field">
          <view class="zan-cell__hd zan-field__title">分期数</view>
          <view class="zan-field__input zan-cell__bd">
            <input name="month" type="number" value="{{submitData.orderPlanAttr_actual.month}}" placeholder="" />
          </view>
          <view class="myInputIcon"></view>
        </view>
        <view class="zan-cell zan-field">
          <view class="zan-cell__hd zan-field__title">尾款</view>
          <view class="zan-field__input zan-cell__bd">
            <input name="finalPay" type="number" value="{{submitData.orderPlanAttr_actual.finalPay}}" placeholder="" />
          </view>
          <view class="myInputIcon"></view>
        </view>
        <view class="zan-cell zan-field">
          <text class="zan-cell__hd zan-field__title">首次支付是否包含月供</text>
          <view class="zan-field__input zan-cell__bd">
            <picker name="monthly_coin" mode="selector" range="{{ coins }}" value="{{ coinsIndex }}" range-key="label"bindchange="bindMonthlyCoinsChange">
              <div class="type">{{ coins[coinsIndex].label }}</div>
            </picker>
          </view>
        </view>
        <view class="zan-cell zan-field">
          <text class="zan-cell__hd zan-field__title">审核结果</text>
          <view class="zan-field__input zan-cell__bd">
            <picker name="state" mode="selector" range="{{ states }}" value="{{ statesIndex }}" range-key="label" bindchange="bindStatesChange">
              <div class="type">{{ states[statesIndex].label }}</div>
            </picker>
          </view>
        </view>
        <view wx:if="{{ticheStateCoin}}" class="zan-cell zan-field">
          <text class="zan-cell__hd zan-field__title">预计提车时间</text>
          <view class="zan-field__input zan-cell__bd">
            <picker name="pickTime_info" mode="date" value="{{pickTime_info}}" end="2020-09-01" bindchange="bindDateChange">
              <view class="picker">

...

ycao
ycao5 楼6 年前

是的,我也遇到这种问题了,表单组件绑定的js里的变量是单向数据流,只在页面初始化渲染的时候有用,当表单组件的值因为用户输入而改变时,js里的变量没有更新值

wujun
wujun6 楼5 年前

看一下完整的代码