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

分类：uni-app

uniapp

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>

2024-12-27 11:42 负责人:无分享

4 个回复

靐齉齾麤龖龗 - 解决不了问题，那就解决提出问题的人

<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)  
                }  
            }  
        }

7***@qq.com (作者)

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

2024-12-27 16:04
7***@qq.com (作者)

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

2024-12-28 17:54

靐齉齾麤龖龗 - 解决不了问题，那就解决提出问题的人

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

7***@qq.com (作者)

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

2024-12-27 14:44
7***@qq.com (作者)

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

2024-12-27 14:48
靐齉齾麤龖龗

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

2024-12-27 14:50
靐齉齾麤龖龗

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

2024-12-27 14:51
7***@qq.com (作者)

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

2024-12-27 15:05

7***@qq.com (作者)

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

javascript:;

7***@qq.com (作者)

所有代码如下，无论点击第几行打印信息都是第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>

蔡cai

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

2024-12-27 15:57

7***@qq.com (作者)

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

<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>

2024-12-27 16:09

蔡cai

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

2024-12-27 16:11
7***@qq.com (作者)

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

2024-12-27 16:38

要回复问题请先登录或注册

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

4 个回复

公告

相关问题

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

与内容相关的链接

4 个回复

公告

相关问题