学学笔记 - 官方 Qiter | 学习笔记

uni-app的v-for里获取input的值

发布时间:4个月前热度: 101 ℃评论数:

uni-app的v-for里获取input的值

JS 部分

// JS 部分
            ,inputData(event, dataValue) {
                if (dataValue[0] == "weight") {
                    this.chwvs[dataValue[1]].weight = event.target.value;
                }
                if (dataValue[0] == "volume") {
                    this.chwvs[dataValue[1]].volume = event.target.value;
                }
            }

页面部分

<!-- 模态框组件 -->
        <view class="modal" v-if="showModal">
            <view class="modal-content">
                <view class="modal-title">确认重量和体积(非鞋服类)</view>
                <view class="modal-content_view" v-for="(item,index) in chwvs" :key="index">
                    <view class="uni-row1">
                        <view>{{index+1}}. {{item.no2}} {{item.id + 1}} {{item.goods}} :</view>
                    </view>
                    <view class="uni-row1">
                        <text class="flex-item">重量(Kg):</text>
                        <input class="flex-item2 white" type="number" :value="item.weight" @input="inputData($event, ['weight', index])">
                        <text class="flex-item">体积(m³):</text>
                        <input class="flex-item2 white" type="number" :value="item.volume" @input="inputData($event, ['volume', index])">   
                    </view>
                </view>
                <view class="modal-buttons">
                    <button class="uni-button" size="mini" type="primary" @click="handleConfirm()">确认</button>
                    <button class="uni-button" size="mini" type="default" @click="handleCancel">取消</button>
                </view>
            </view>
        </view>

其本质是用了 属性 @input=”inputData($event, [‘weight’, index])” 来调用方法inputData获取值

uni-app的v-for里获取input的值

栏目导航

  1. JavaScript
  2. Uni-APP
  3. CSS

手机扫码访问