收藏
回答

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

问题模块 框架类型 终端类型 操作系统 微信版本 基础库版本
框架 小程序 微信iOS客户端 iOS 6.6.5 1.9.1

前提条件: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


如果是需求:


* 你希望有什么能力?


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


最后一次编辑于  2018-03-23
回答关注问题邀请回答
收藏

6 个回答

  • 微信技术专员 - Rex
    微信技术专员 - Rex
    2018-03-23

    麻烦给个相关的代码片段(https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/minicode.html),我们定位下问题

    2018-03-23
    赞同
    回复
  • &|!🤗
    &|!🤗
    2018-07-05

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

    2018-07-05
    赞同
    回复
  • 星
    2018-03-23

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

    2018-03-23
    赞同
    回复
  • 陈
    2018-03-23
    <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";
    import DateUtil from '../../../utils/date.js';
    import OrderState from '../../../utils/OrderState.js';
    import ApproveHistory from "../../../components/ApproveHistory";
    import OrderInfoTemplet from "../../../components/OrderInfoTemplet";
    import BenefitApproveForm from "./form/BenefitApproveForm";
    import BusinessApproveForm from "./form/BusinessApproveForm";
     
    export default class Index extends wepy.page {
      config = {
        navigationBarTitleText: '审批详情'
      }
     
      components = {
        approveHistory: ApproveHistory,
        orderInfoTemplet: OrderInfoTemplet,
        benefitApproveForm: BenefitApproveForm,
        businessApproveForm: BusinessApproveForm,
      };
     
      data = {
        option: {},
        businessTypes: [{ value: 1, label: '收款' }, { value: 2, label: '付款' }, { value: 3, label: '回滚' }, { value: 4, label: '退款' }, { value: 5, label: '报销' }, { value: 6, label: '其他' }],
     
        benefitTypes: [{ value: 0, label: '销售优惠' }, { value: 1, label: '公司特惠' }, { value: 2, label: '公司优惠活动' }],
        con_data: {},
        tellersData: [],
        finxingsData: [],
        benefitData: [],
        customerInfos: [],
        formProps: [],
        businessInfo: {},
        formKey: '',
        taskId: 0,
      }
     
      computed = {
     
      }
     
      methods = {
     
      }
     
      async getInfo(id) {
        wepy.showLoading({
          title: "加载中"
        });
        // 用一个标志位去处理重复请求的问题
     
        let _dd = {};
     
        _dd.taskId = this.data.option.id;
     
        const res = await wxRequest.ajaxByPromise(
          "GET",
          CglobalData.REQUEST_URL_PRE_MIS + "/task/getTaskInfo.do",
          _dd
        );
     
        // console.info('res in approveForm', res.data.data);
     
        let con_data = res.data.data
     
        this.con_data = con_data || {};
     
        this.formKey = con_data.formKey;
        this.taskId = con_data.id;
     
        // this.tellersData = con_data.tellers || [];
     
        // this.finxingsData = con_data.orderFixings || [];
     
        // this.benefitData = con_data.orderBenefitAttrs || [];
     
        // this.customerInfos = con_data.customerInfos || [];
     
        this.con_data.orderPlanAttr_actual = con_data.orderPlanAttr_actual || {};
     
        this.con_data.orderPlanAttr = con_data.orderPlanAttr || {};
     
        //
        this.businessInfo = JSON.parse(JSON.stringify(con_data.businessInfo.businessInfo || {}))
     
     
     
        // 处理状态信息
        let text = "";
     
        if (con_data.state != OrderState.getByKey('ITENTPAY').value && con_data.state <= OrderState.getByKey('REFUSE_PLAN').value && con_data.benefitState == 0) {
          text = "优惠审核中";
        } else if (con_data.state != OrderState.getByKey('ITENTPAY').value && con_data.benefitState == 2) {
          text = "优惠审核不通过";
        } else {
          text = OrderState.getByValue(con_data.state).label || '';
        }
     
        this.con_data.stateStr = text;
     
        // 处理时间轴信息
        let formProps = con_data.formProps;
        for (var i = 0; i < formProps.length; i++) {
          let ele formProps[i];
     
          if (ele.type == 1) {
            ele.current false;
            ele.done false;
            ele.text = (ele.typeInfo || '');
            ele.extraText = (ele.approve || '');
            ele.desc = ele.remark;
          } else {
            ele.current true;
            ele.done true;
            ele.text = (ele.proccessName || '') + "-" + (ele.name || '');
            ele.endTimeStr DateUtil.format(ele.endTime, 'yyyy-MM-dd HH:mm:ss')
            ele.desc = ele.remark;
          }
     
        }
     
        this.formProps = formProps;
        this.$apply();
     
      }
      events = {
     
      }
     
      onLoad(option) {
        this.option = option;
        this.$apply();
        this.getInfo(option.id);
      }
    }
     
    </script>
    <style lang="less">
    .dudu_table_title {
      text-align: center;
      background-color: #eee;
     
      color: #333333;
      font-size: 20rpx;
      padding: 20rpx 15rpx 20rpx 15rpx;
    }
     
    .dudu_table_context {
      text-align: center;
      background-color: #fff;
      color: #333333;
      font-size: 20rpx;
      padding: 20rpx 15rpx 20rpx 15rpx;
      border: 0 solid #e5e5e5;
      border-width: 1px;
      border-radius: 1px;
      min-height: 60rpx; // 处理文字超长
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
     
     
    .dudu_labelStyle {
      min-width: 150rpx;
    }
     
     
    .customerName {
      font-size: 30rpx;
    }
     
    .dudu_contextStyle {
      margin-right: 10rpx;
    }
     
    .dudu_contextStyle-customer {
      font-size: 30rpx;
    }
     
    .weui-form-preview__item::after {}
     
     
    .dudu_border-bottom {
      border: 0 solid #e5e5e5;
      border-bottom-width: 1px;
    }
     
    </style>


    2018-03-23
    赞同
    回复
  • 陈
    2018-03-23
    <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">
                    <div class="inviteDate_info"> {{pickTime_info}}</div>
                  </view>
                </picker>
              </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">
                <textarea name="remark" bindblur="bindRemarkTextarea" value="{{submitData.remark}}" placeholder="必填,请输入备注...最长140字" />
              </view>
            </view>
          </view>
          <view class="btn-area submitButton">
            <button class="weui-btn" formType="submit">提交信息</button>
          </view>
        </form>
      </view>
    </template>
    <script>
    import wepy from 'wepy';
    import Tips from "../../../../utils/tip";
    import util from "../../../../utils/util";
    import wxRequest from "../../../../utils/wxRequest";
    import Validate from "../../../../utils/Validate";
    import OrderState from "../../../../utils/OrderState";
    import { CglobalData } from "../../../../utils/constant";
    export default class Com extends wepy.component {
      components = {
     
      };
      props = {
        taskId: { // 单向传值
          type: Number,
          default: 0,
        },
        con_data: { // 单向传值
          type: Object,
          default: {},
        },
      };
     
      data = {
        con_data: {},
        submitData: { plan: {}, orderPlanAttrs: {}, orderPlanAttr_actual: {}, remark: " " },
        coins: [{ value: 0, label: '是' }, { value: 1, label: '否' }],
        coinsIndex: 0,
        states: [
          { value: OrderState.getByKey('NOPASS_PLAN').value, label: '方案不通过' },
          { value: OrderState.getByKey('NOPASS_CREDIT').value, label: '征信不通过' },
          { value: OrderState.getByKey('BUSINESS_CLOSE').value, label: '黑户不做 关闭订单' },
          { value: OrderState.getByKey('BESUBMIT_APPROVE').value, label: '审核通过' }
        ],
        statesIndex: 0,
        ticheStateCoin: false,
        pickTime_info: util.getYesterdayTimeWhithoutHFS(),
      };
      methods = {
        formReset: function() {
          console.log("form发生了reset事件");
        },
        formSubmit: function(e) {
          let self = this;
          wx.showModal({
            title: '确认提交',
            content: '',
            success: function(res) {
              if (res.confirm) {
                console.log('用户点击确定')
                console.log("form发生了submit事件,携带数据为:", e.detail.value);
                self.validateValue(e.detail.value);
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
     
        },
        bindMonthlyCoinsChange(e) {
          console.log("bindMonthlyCoinsChange picker发送选择改变,携带值为", e.detail.value);
          this.coinsIndex = e.detail.value;
        },
        bindStatesChange(e) {
          console.log("bindStatesChange picker发送选择改变,携带值为", e.detail.value);
          this.statesIndex = e.detail.value;
          this.submitData.state = this.data.states[e.detail.value].value;
     
     
          if (this.data.states[e.detail.value].value == OrderState.getByKey('BESUBMIT_APPROVE').value) {
            this.ticheStateCoin = true;
          } else {
            this.ticheStateCoin = false;
          }
          // this.$apply();
     
        },
        bindDateChange: function(e) {
          console.log("bindDateChange picker发送选择改变,携带值为", e.detail.value);
          this.pickTime_info = e.detail.value;
     
        },
        bindRemarkTextarea: function(e) {
          this.submitData.remark = e.detail.value;
        },
        bindSubmitDataChange: function(e) {
          // body...
        }
     
     
      };
      validateValue(param) {
        // console.info("param", param);
        if (!Validate.required(param.downPayment) || !Validate.digits(param.downPayment)) {
          Tips.alert('请检查 首付 信息');
          return;
        }
        if (!Validate.required(param.monthly) || !Validate.digits(param.monthly)) {
          Tips.alert('请检查 月供 信息');
          return;
        }
        if (!Validate.required(param.month) || !Validate.digits(param.month)) {
          Tips.alert('请检查 分期数 信息');
          return;
        }
        if (!Validate.required(param.finalPay) || !Validate.digits(param.finalPay)) {
          Tips.alert('请检查 尾款 信息');
          return;
        }
        if (!Validate.required(param.remark)) {
          Tips.alert('请检查 备注 信息');
          return;
        }
     
        console.log('验参通过')
        this.handleSubmit(param);
      }
     
      async handleSubmit(param) {
        // console.info('handleSubmit param', param)
        // console.info('handleSubmit submitData', this.data.submitData)
     
        // _dd 为总参数
        let _dd = this.data.submitData || {};
        //
        let _rr = "";
        for (var i = 0; i < this.states.length; i++) {
     
          if (this.states[i].value == _dd.state) {
     
            _rr this.states[i].label;
     
          }
        }
     
        _dd.taskId this.data.taskId;
        _dd.pickTime this.data.pickTime_info;
        _dd.remark param.remark;
        // console.info('this.data.pickTime_info ....:', this.data.pickTime_info)
     
        var remark _rr;
     
        // 构建备注
        if (_dd.state == OrderState.getByKey('BESUBMIT_APPROVE').value) {
     
          console.log('本次是BESUBMIT_APPROVE 用原本的方案信息')
     
          this.data.submitData.orderPlanAttr_actual = this.data.submitData.orderPlanAttr_actual_tmp;
     
          remark += ("  " + "预约交车时间:" + (_dd.pickTime));
     
        }
     
        _dd.remark = remark + "   " + _dd.remark;
     
        // 更新orderPlanAttr_actual的信息
        this.submitData.orderPlanAttr_actual.downPayment param.downPayment;
        this.submitData.orderPlanAttr_actual.monthly param.monthly;
        this.submitData.orderPlanAttr_actual.month param.month;
        this.submitData.orderPlanAttr_actual.finalPay param.finalPay;
        this.submitData.orderPlanAttr_actual.monthly_coin = this.data.coins[this.data.coinsIndex].value;
     
        // 拼接info信息
        _dd.info JSON.stringify({ "plan": this.data.submitData.plan, "orderPlanAttrs": this.data.submitData.orderPlanAttrs, "orderPlanAttr_actual": this.data.submitData.orderPlanAttr_actual });
     
        console.info('_dd afterHandled:', _dd)
     
        const res await wxRequest.ajaxByPromise2(
          "POST",
          CglobalData.REQUEST_URL_PRE_MIS + "/task/completeTask.do",
          _dd
        );
     
        // 退回上一个页面 并刷新列表
        wx.setStorageSync('needRefreshPage', true)
        await wepy.showModal({
          title: "提示",
          content: "商务审核成功成功",
          showCancel: false,
        });
        wepy.navigateBack({
          delta: 1
        });
      }
      events = {}
      watch = {
        taskId(newValue, oldValue) {
          this.taskId newValue;
        },
        con_data(newValue, oldValue) {
     
          this.con_data newValue;
     
          // console.info('con_data  newValue', newValue)
     
          let _temp newValue.businessInfo.businessInfo;
     
          this.submitData.plan _temp.plan || {};
     
          this.submitData.plan.state null;
     
          this.submitData.orderPlanAttrs _temp.orderPlanAttr || {};
     
          this.submitData.orderPlanAttr_actual _temp.orderPlanAttr_actual || {};
     
          // 实际订单信息备份
          this.submitData.orderPlanAttr_actual_tmp JSON.parse(JSON.stringify(_temp.orderPlanAttr_actual || {}));
        }
      }
      onLoad() {
     
      }
    }
     
    </script>



    2018-03-23
    赞同
    回复
  • 陈
    2018-03-23

    看一下完整的代码

    2018-03-23
    赞同
    回复