uni-app中v-for事件处理函数每次拿到的参数都是最后一个元素的

uni-app中v-for事件处理函数每次拿到的参数都是最后一个元素的

问题：confirm事件的处理函数默认只有一个参数，我从网上找到使用箭头函数传递多参数的方法，现在可以传递多个参数了，但传入事件的参数一直是循环最后一次的参数，请问这个问题怎么解决呢

<template>  
    <view class="u-page">  
        <u-gap height="30" bgColor="#fff"></u-gap>  
        <u--form>  
            <view v-for="(a, index) in alarm" :key='index'>  
                <u-form-item label="时间" labelWidth="65%" @click="show_picker=true">  
                    <u-datetime-picker :show="show_picker" title="小时:分钟" mode="time"  
                        @confirm="(e) => click_handler(e, a, index)" @close="show_picker = false" @cancel="show_picker = false">  
                    </u-datetime-picker>  
                </u-form-item>  
            </view>  
        </u--form>  
    </view>  
</template>  

<script>  
export default {  
    methods: {  
        click_handler(e, a, index){  
            console.log(e)  
            console.log(a.hour, a.min)  
            console.log(index)  
            this.show_picker = false  
        }  
    },  

    data() {  
        return {  
            show_picker: false,  
            alarm:[  
                {  
                    hour: 0,  
                    min: 0  
                },  
                {  
                    hour: 1,  
                    min: 1  
                },  
                {  
                    hour: 2,  
                    min: 2  
                }  
            ]  
        }  
    }  
}  
</script>
开发环境 版本号 项目创建方式
uni-app 无 无

更多关于uni-app中v-for事件处理函数每次拿到的参数都是最后一个元素的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复
<template> <view class="u-page"> <u-gap height="30" bgColor="#fff"></u-gap> <u--form> <view v-for="(a, index) in alarm" :key="index"> <u-form-item label="时间" labelWidth="65%" @click="chooseTimer(a, index)"> {{a.hour + ':' + a.min}} </u-form-item> </view> </u--form> <u-datetime-picker :value="bindTimer" :show="show_picker" title="小时:分钟" mode="time" @confirm="click_handler" @close="show_picker = false" @cancel="show_picker = false"> </u-datetime-picker> </view> </template> <script> export default { methods: { chooseTimer(a, i){ this.clickData = { data: a, index: i } this.bindTimer = a.hour + ':' + a.min this.show_picker = !0 }, click_handler(e) { console.log(e) const [hour, min] = e.value.split(':') this.clickData.data.hour = hour this.clickData.data.min = min this.show_picker = false } }, data() { return { show_picker: false, clickData: {}, bindTimer: '', alarm: [{ hour: '00', min: '00' }, { hour: '01', min: '01' } ] } } } </script>

需要这样，如果你想实现的话，说不出来是啥原因，哈哈 还有就是如果设置不了时间需要在u-datetime-picker组件里面修改 watch: {
show(newValue, oldValue) {
if (newValue) {
// 添加这一行
this.innerValue = this.correctValue(this.value)
this.updateColumnValue(this.innerValue)
}
}
}

更多关于uni-app中v-for事件处理函数每次拿到的参数都是最后一个元素的的实战教程也可以访问 https://www.itying.com/category-93-b0.html


哈哈，能解决就不错了，看看其他人有没有能说出具体原因的

u-datetime-picker这个组件好像有问题，v-model双向绑定无效

写法问题。。。。把@confirm="(e) => click_handler(e, a, index)" 改成@confirm=“click_handler($event, a, index)”

改@confirm="click_handler($event, a, index)"后回调函数的参数打印出来还是最后一个元素的

click_handler(e, a, index)中的e是正常的，后面两个总是列表最后一个元素

回复 7***@qq.com: 怎么可能，截图看看你的代码

回复 靐齉齾麤龖龗: 改了之后刷新一下页面

回复 靐齉齾麤龖龗: 图发出来了，刷新过页面

代码和运行截图如下，日志是点击第一行打印的

javascript:;

所有代码如下，无论点击第几行打印信息都是第3行 2 2
<template>
<view class="u-page">
<u--form>
<view v-for="(a, index) in alarm" :key='index'>
<u-form-item label=“时间” labelWidth=“65%” @click=“show_picker=true”>
<u-datetime-picker
:show=“show_picker”
mode=“time”
@confirm=“click_handler($event, a, index)”
@close=“show_picker = false”
@cancel=“show_picker = false”>
</u-datetime-picker>
</u-form-item>
</view>
</u--form>
</view>
</template>

<script> export default { methods: { click_handler(e, alarm, index) { console.log(e) console.log(alarm.desc, alarm.hour, alarm.min) console.log(index) this.show_picker = false } }, data() { return { show_picker: false, alarm: [{ desc: '第1行', hour: 0, min: 0 }, { desc: '第2行', hour: 1, min: 1 }, { desc: '第3行', hour: 2, min: 2 } ] } } } </script> <style lang="scss"> .u-page { padding: 15; } </style>

u-datetime-picker提取到外面就好了

回复 蔡cai: 这是原始代码，修改后的可以发发下吗，不太理解放哪个位置

回复 7***@qq.com: 就是他（靐齉齾麤龖龗）发的评论就是了

回复 蔡cai: 好的，以为调整一下层级又更简单的实现呢，谢谢啦

在uni-app中使用v-for时，如果你遇到了事件处理函数中每次拿到的参数都是最后一个元素的问题，这通常是因为JavaScript闭包的作用域特性导致的。在循环中定义的函数会捕获其所在作用域的变量引用，而不是循环体中的当前值。

为了解决这个问题，你可以使用几种不同的方法。下面是两种常见的方法，通过代码示例来说明：

方法一：使用立即执行函数表达式（IIFE）

立即执行函数表达式（IIFE）可以创建一个新的作用域，这样每个循环迭代都会有自己的作用域，从而捕获正确的值。

<template>
  <view>
    <button v-for="(item, index) in items" :key="index" @click="handleClick(index)">
      {{ item.name }}
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ]
    };
  },
  methods: {
    handleClick(index) {
      const item = this.items[index];
      console.log(item.name);
    }
  }
};
</script>

<!-- 或者使用IIFE -->
<template>
  <view>
    <button v-for="(item, index) in items" :key="index" @click="(() => this.handleClick(index))()">
      {{ item.name }}
    </button>
  </view>
</template>

<script>
export default {
  // ... 同上
  methods: {
    handleClick(index) {
      const item = this.items[index];
      console.log(item.name);
    }
  }
};
</script>

方法二：在v-for中使用对象存储索引和数据

另一种方法是使用对象来存储每个元素的索引和数据，这样你可以直接传递对象给事件处理函数。

<template>
  <view>
    <button v-for="(item, index) in items" :key="index" @click="handleClick({ index, item })">
      {{ item.name }}
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ]
    };
  },
  methods: {
    handleClick({ index, item }) {
      console.log(item.name);
    }
  }
};
</script>

以上两种方法都可以有效地解决v-for中事件处理函数获取到最后一个元素参数的问题。选择哪种方法取决于你的具体需求和代码风格偏好。在实际开发中，推荐根据具体情况选择最适合的方法。

回到顶部