使用表单组件时 例如在form内使用input 未实时绑定到数据实体中
发布于 5 年前 作者 ayi 4896 次浏览 来自 问答

前提条件：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 回复

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

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

<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>
<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>


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

看一下完整的代码

回到顶部