如何在框架组件上传递自己循环出来的目标id?

Question

如何在框架组件上传递自己循环出来的目标id?
如下是代码可运行，

            <view>
                <u-swipe-action>
                    <u-swipe-action-item :options="options2" @click="click" :autoclose="true"  v-for="(item,id) in rentAccounts" :key="index"> 
                        <view class="swipe-action  u-border-bottom" v-if="item.state=='已创建'">
                            <view class="swipe-action__content" >
                                <u-row>
                                    <u-col span="6"> <text class="swipe-action__content__text">{{item.num}}</text>
                                    </u-col>
                                    <u-col span="6"> <text class="swipe-action__content__text"
                                            style="text-align: right;color:#B9B9B9">{{item.state}}</text></u-col>
                                </u-row>
                            </view>
                        </view>
                        <view v-else  class="swipe-action  u-border-bottom">
                            <view class="swipe-action__content" >
                                <u-row>
                                    <u-col span="6"> <text class="swipe-action__content__text">{{item.num}}</text>
                                    </u-col>
                                    <u-col span="6"> <view class="swipe-action__content__text"
                                            style="text-align: right;color:red">{{item.state}}</view></u-col>
                                </u-row>
                            </view>
                            </view>    
                    </u-swipe-action-item>
                </u-swipe-action>
            </view>


JS
rentAccounts: [{
                    id:'1',
                    num: '101',
                    state: '已创建'
                }, {
                    id:'2',
                    num: '101',
                    state: '未创建'
                }, {
                    id:'3',
                    num: '103',
                    state: '已创建'
                }, {
                    id:'4',
                    num: '104',
                    state: '未创建'
                }],
                options2: [{
                    
                    text: '复制',
                    style: {
                        backgroundColor: '#3c9cff'
                    }
                }, {
                    text: '删除',
                    style: {
                        backgroundColor: '#f56c6c'
                    }
                }],

方法
            click(index) {
                console.log('click', index);
                uni.showModal({
                    title: '温馨提示',
                    content: '确定要删除吗？',
                    success: res => {
                        if (res.confirm) {
                            this.show2 = false
                        }
                    }
                })
            },

此时框架自带的@click方法会自行判断，是删除还是复制按钮，

如果是复制则会返回0 删除返回1，

那么我的@click方法该怎么添加参数才能把下边的所有按钮的id获取到呢？ 意思就是说
我需要返回三个参数。 前两个参数自带的框架已经给了， 即 0,1 前者是复制后者是删除， 但是我还需要返回所在按钮的id ？请问怎么实现？
尝试过

 @click="click(index，id xxxxxx"
方法
click(index,index1,xxxx)
这种似乎返回不了

Answer 1

基于Monster 组和GPT的调写：
调用 click 方法时，将目标按钮的 id 作为第三个参数传递进去

<u-swipe-action-item :options="options2" @click="click($event, id)" :autoclose="true"  v-for="(item,id) in rentAccounts" :key="index"> 

$event 表示原本传递给 click 方法的参数，即事件对象。我们可以在 click 方法中通过 $event.target 来获取当前点击的按钮元素，然后从元素的 dataset 中读取 id 属性值，最后将这个值作为第三个参数返回。

click(event, index, id) {
  const target = event.target;
  const targetId = target.dataset.id;
  console.log('click', index, targetId);
  uni.showModal({
    title: '温馨提示',
    content: '确定要删除吗？',
    success: res => {
      if (res.confirm) {
        this.show2 = false
      }
    }
  })
},

在模板中，我们通过在按钮元素上设置 data-id 属性，将 id 值绑定到元素上。

<u-swipe-action-item :options="options2" @click="click($event, id)" :autoclose="true"  v-for="(item,id) in rentAccounts" :key="index"> 
  <view class="swipe-action  u-border-bottom" v-if="item.state=='已创建'" :data-id="item.id">
    <!-- 省略其他内容 -->
  </view>
</u-swipe-action-item>