关于小程序js中this.setData方法的一些看法

关于小程序js中this.setData方法的一些看法


今天在实现小程序的一个功能:实时监听用户在输入框中填写的字数,包括选择的图片。首先来看data:

data:{
    opinion:"",      //意见
    word_count:0,    //意见字数,最大200
    src:[],          //图片地址
    image_count:0,   //图片数量
    wechat:""        //微信号
  },

然后wxml文件如下(效果如图)

<view>
				<input
				class="input"
				maxlength="200" 
				bindinput="textInput"
				placeholder="点击这里输入您的建议~" 	
				/>
				<view class="word-count">{{word_count}}/200</view>
			</view>

在这里插入图片描述
并且,设想能够实时地监听输入的字数,于是在js中写了一个textInput方法,对应input中的bindinput="textInput",同时textInput方法中包含一个setData方法,目的是把输入框中的信息,返回给js中的data。具体用法可参考:https://www.jb51.net/article/168701.htm
但是这个时候,出现了一个问题,在同一个setData方法中,如果先将e.detail.value赋值给data中的opnion,然后将opnion的length赋值给word_count,会出现不能同步更新data中的变量,具体可参考下述代码及运行结果:

textInput(e){
  this.setData({
    opinion:e.detail.value,
    word_count:this.data.opinion.length
  })
  console.log("第一次统计字数:"+ this.data.word_count)
  this.setData({
    word_count:this.data.opinion.length
  })
  console.log("第二次统计字数:"+ this.data.word_count)
},

在这里插入图片描述
在这里插入图片描述
我先后输入了abc。然后根据代码和控制台输出结果,我们可以看出,第一个setData方法中,先将e.detail.value赋值给data中的opnion,然后将opnion的length赋值给word_count,我们可以发现,在同一个setData方法中,他opnion的值还没有完成赋值,也就是此时的this.data.opinion.length统计的还是setData方法以前的opnion.length。
然后我们再写下一个setData方法,再将this.data.opinion.length赋值给image_count,此时控制台结果正常。
结论:setData方法中所有赋值要在这个方法完成后才能成功赋值给data中的变量。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值