回答

置顶使用表单组件时例如在form内使用input 未实时绑定到数据实体中精选热门

2018-03-233726浏览问题模块： Bug反馈

框架类型	终端类型	操作系统	微信版本	基础库版本
小程序	微信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

如果是需求：

* 你希望有什么能力？

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

6 个回答

黄思程
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 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 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 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 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
有用
回复
关闭
请选择投诉理由
广告内容
违法违规
恶意灌水内容
其他

请登录后发表内容

置顶使用表单组件时例如在form内使用input 未实时绑定到数据实体中精选热门

请选择投诉理由

删除当前帖子

删除后帖子内容及评论将一并被删除，且不可恢复。

关注“微信开放社区”公众号

反馈

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

关注“微信开放社区”公众号

置顶使用表单组件时 例如在form内使用input 未实时绑定到数据实体中精选热门

请选择投诉理由

删除当前帖子

删除后帖子内容及评论将一并被删除，且不可恢复。

关注“微信开放社区”公众号

反馈

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

关注“微信开放社区”公众号

置顶使用表单组件时例如在form内使用input 未实时绑定到数据实体中精选热门