微信小程序点击按钮动态添加或删除输入框，点击步进器按钮获取输入框的值进行加减计算(选中删除后，步进器数值未更新的解决办法)--不使用表单

今天在选中删除后发现，保存的列表值已更新，但是页面的步进器数值却没有改变

目标：当添加三个item后，删除中间的，显示如下效果

输入示例：

1 进价1 步进器1

2 进价2 步进器2

3 进价3 步进器3

查阅官方文档https://youzan.github.io/vant-weapp/#/stepper

思路：

猜测是其value的值没有改变，导致页面的步进器也没有改变，使用文档中的异步更变

关键：

1. value的数据绑定是通过date.value唯一指定了，一旦更变导致所有的一起更变
2. wx:for的列表渲染绑定item.value

解决办法：

wxml代码：

<view wx:for="{{inputList}}" wx:key="id">
	<view class="items">
		<view class="indexs">序号:{{index+1}}</view>
		<!-- 进价 -->
			<text>进价￥</text>
		<input placeholder="填入进价{{index+1}}" data-index="{{index+1}}"  bindinput="inpPurchase" value="{{item.purchaseValue}}"/>
		<!-- 步进器 -->
		<van-stepper class="num" value="{{item.value}}" data-index="{{index+1}}" bind:change="numOnChange" async-change/>
	</view>


	<!-- 添加删除按钮 -->
	<view class="add-del-view">
		<button data-index="{{index+1}}" bindtap="delmore">删除</button>
		<button data-index="{{index+1}}"  bindtap="addmore" type="primary">添加</button>
	</view>
</view>
<!-- 轻提示 -->
<van-toast id="van-toast" />
           

JavaScript代码：

import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    //输入框列表
    inputList:  [{
      value:1,//步进器数值
      purchaseValue:null,//进价输入值
    }],
  },
  
  //增加按钮
  addmore(e) {
    console.log("增加")
    console.log(e)
    //简写变量书写
    const {inputList} = this.data
    const {dataset: {index}} = e.currentTarget
    //splice方法来添加对象
    //第一个参数是开始的下标，第二个参数是零为添加操作，第三个参数是添加的内容
    inputList.splice(index, 0, {value:1,purchaseValue:null})
    //更新列表
    this.setData({
      inputList
    })
  },
  
  //删除按钮
  delmore(e){
    console.log("减少")
    console.log(e)
    //简化变量书写
    const {inputList} = this.data
    const {dataset: {index}} = e.currentTarget
    console.log("删除下标index"+index)
    //splice方法第一个参数为下标，第二个参数不为零，就删除指定个
    inputList.splice(index-1,1)
    // console.log(inputList)
    //更新列表
    this.setData({
      inputList:inputList
    })
    //小bug删除后，步进器还是显示的删除当前的数值，要替换
    // inputList[index-1].value = tempvalue
  },


  //步进器改变事件
  numOnChange(e){
    console.log(e)
    const {inputList} = this.data
    const {dataset: {index}} = e.currentTarget
    //e.detail步进器的值
    console.log(e.detail)
    Toast.loading({ forbidClick: true });

    setTimeout(() => {
      Toast.clear();
      this.setData({ value:e.detail });
    }, 200);
    //计算值=数量*进价
    console.log("index"+index)
    //数量赋值给inputList存储起来
    inputList[index-1].value=Number(e.detail)
    //更新列表
    this.setData({
      inputList
    })
  },
  //输入进价事件
  inpPurchase(e){
    const {inputList} = this.data
    const {dataset: {index}} = e.currentTarget
    console.log(index)
    //获取输入的值
    console.log("输入的值："+e.detail.value)
    //将获取的输入值赋值给inputList存储起来
    inputList[index-1].purchaseValue=e.detail.value
    //更新列表
    this.setData({
      inputList:inputList
    })
  },
})
           

如有错误，欢迎纠正