微信小程序如何给input赋值

Question

后端返给前端数据，如何给input赋值
附代码：

wxml:

<input type="text" class='inputCss' bindblur="inputWatch" data-name='{{item.fieldId}}'  data-fieldId='{{ item.fieldId }}' ></input>

js：

data: {
    commitData: {}, //数据
  },
// 这是输入的数据绑定到value值的方法
inputWatch(e) {
    let commitData = this.data.commitData;
    let item = e.currentTarget.dataset.name;
    commitData[item] = e.detail.value;
    this.setData({
      commitData
    });
    console.log('commitData', commitData)
  },

// 后端获取到的数据,是从 缓存里面取到， 取到之后我要重新给页面上的input 赋值
onLoad: function (options) {
    var toQuery = wx.getStorageSync('toQuery'); // 在缓存中取到 之前已经保存到的数据
    this.setData({
      commitData : toQuery
    });
}

现在是 我把获取到的数据 重新给这个 对象赋值， 然后 前端还是不显示出来， 是什么原因呢。
其实 意思就是 如果没有数据， 那我就会让他新增， 如果有数据我就让它显示， 并且可以修改。

Answer 1

通过input 的value属性给input赋值，通过bindinput执行方法，修改value的值；可实现双向绑定

Answer 2

wxml

<input type="text" value="{{data.name}}"></input>

js

Page({
    data:{
       data:{
           name:''
          } 
    },
    onLoad: function (options) {
        var toQuery = wx.getStorageSync('toQuery'); // 在缓存中取到 之前已经保存到的数据
        this.setData({
          data : toQuery
        });
}
})

Answer 3

第二张图：

第三张图:

wxml代码：
<!-- <text>模板页面</text> -->
<view>
  <view class='row'>
    <view class='head'>
      <view class='userIcon'>
        <open-data type="userAvatarUrl" class='userInfo'></open-data>
        <view class='userGoOut' bindtap='exit'>退出登录</view>
      </view>
    </view>
    <view style='margin-top:130rpx; margin-bottom:140rpx; '>
    <!-- 循环info  生成页面 -->
      <view class='content' wx:for='{{info}}' wx:key='{{i}}'>
        <text class='text'>{{item.fieldName}}:</text>
        <view wx:if="{{item.fieldType == 'FLOAT'}}">
          <input type="digit" class='inputCss' bindblur="inputWatch" value="{{data.name}}" data-name='{{item.fieldId}}'  data-fieldId='{{ item.fieldId }}' ></input>
        </view>
        <view wx:if="{{item.fieldType == 'STRING'}}">
          <input type="text" class='inputCss' bindblur="inputWatch" value="{{data.name}}" data-name='{{item.fieldId}}'  data-fieldId='{{ item.fieldId }}' ></input>
        </view>
      </view>
    </view>
  </view>
  <view class='rowButton'>
    <button class='button' bindtap='submit'>提 交</button>
  </view>
</view>

js代码：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    info: [], //模板数据
    resumeInfo: [], //人员信息
    dateModel: '',//模板日期数据
    dateStart: '', //提交数据日期
    commitData: {}, //提交的数据
    access_token: null, //token
    projectId: null, //项目编号
    data:{
      name:''
    }
  },
  // input框输入失去焦点时判断
  inputWatch(e) {
    let commitData = this.data.commitData;
    let item = e.currentTarget.dataset.name;
    commitData[item] = e.detail.value;
    this.setData({
      commitData
    });
    console.log('commitData', commitData)
  },

  // 退出登录按钮
  exit(){
    wx.showModal({
      title: '提示',
      content: '您确定要退出吗?',
      success: function (res) {
        if (res.confirm) { // 点击确定
          wx.showToast({ title: '退出中,请稍后', icon: 'loading', mask:true, duration: 1000 });
          setTimeout(function () {
            wx.redirectTo({
              url: '../index/index',
            });
            wx.hideToast();
          }, 2000)
        } else {  // 点击取消
          // console.log('弹框后点取消')
        }
      }
    })
  },
  // 提交按钮
  submit() {
    var that = this;
    var orgId = that.data.resumeInfo['orgId']
    var createdBy = that.data.resumeInfo['employeeId'];
    let data = {
      insert: Object.assign({}, that.data.commitData, {C001: that.data.dateStart}, { createdBy: createdBy }, { orgId: orgId }),
      option: { projectId: that.data.projectId }
    }
    wx.showModal({
      title: '提示',
      content: '确定提交数据么',
      success: function (res) {
        if (res.confirm) {
          wx.showToast({
            title: '提交中,请稍后',
            icon: 'loading',
            mask: true,
            duration: 2000
          });
          wx.request({
            url: 'http://192.168.1.64:3001/api/addDailyData',
            data: JSON.stringify(data),
            method: "POST",
            header: {
              'content-type': 'application/json',
              'Authorization': `access_token ${that.data.access_token}`
            },
            success: function (res) {
              console.log('提交',res)
              // 查询是否超时
              if (res.statusCode == '401' && res.data.status == '401') {
                wx.showToast({
                  title: '系统超时,请重新登录!',
                  icon: 'none',
                  duration: 1000,
                  mask: true
                })
                setTimeout(function () {
                  wx.redirectTo({
                    url: '../index/index',
                  })
                  wx.hideToast();
                }, 1000)
              }
              if (res.statusCode == 200) {
                wx.redirectTo({
                  url: '../success/success',
                });
                wx.hideToast();
              }
            }
          })
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 缓存获取信息
    var info = wx.getStorageSync('info');
    var acc = wx.getStorageSync('access_token');
    var resume = wx.getStorageSync('resumeInfo');
    
    // 这是图三 的数据 存放到缓存中了
    var toQuery = wx.getStorageSync('toQuery');
    // ======================
    
    var newDateStart = options.dateStart;
    var pro = null;
    var tempData = []; // 模板数据
    var tempArray = []; // 临时数据 给info
    info.forEach(function (item, index) {
      tempData = item.opt_ModelDetailTables;
      pro = item.projectId;
    })
    tempData.forEach(function (item, index) {
      if (item.fieldId != "C001") {
        tempArray.push(item)
      }
    })
    this.setData({
      info: tempArray,
      dateStart: newDateStart,
    });
  },
})