vue 点击事件第一次点击能带正确的参数, 第二次点击的时候, 带过去的是第一次的参数

Question

jsp 页面

<tr v-for=" (item,index) in labelList[0]"  :key="item.id" >
                        <td>{{index+1}}</td>
                      <td>
                            <div >
                                <span><a class="detailBtn" @click="show(item)">查看</a></span>
                                <span><a class="editBtn" @click="edit(item)" v-show="item.status==1 || item.status==2">编辑</a></span>
                                <span v-show="item.status==1"><a href="javascript:void(0);"  @click="offline(item.id,$event,index)"  >停用{{item.id}}-{{index}}</a></span>
                                <span v-show="item.status==2"><a  href="javascript:void(0);" @click="open(item.id)"  >启用{{item.id}}-{{index}}</a></span>
                                <span v-show="item.status==1 || item.status==2"><a @click="remove(item)">删除{{item.id}}-{{index}}</a></span>
                            </div>
                        </td>
 </tr>

js

  // 停用
    offline: function (val,event,index) {

      $('#my-prompt05').modal({
        onConfirm: function (e) {
          console.log(event.target);
          var formData = JSON.stringify({"id": val});
       // 走后台接口
          RestFul.POST_AJAX('/management/label/offlineById', formData,
              batchUpdate,// 成功回调
              function (response) {
                // 响应错误回调
              });
        },
        onCancel: function (e) {
          //
        }
      });

    },

// 回调函数

  batchUpdate = function (obj) {
        if (obj !== null) {

          alert("操作成功");
     //   dataList.labelList = '';
        } else {
          alert("操作失败");
        }
        queryDataList();// 再次请求列表数据
       //location.reload();
      };

现在遇到的问题:

第一次
点击 停用61, 操作正确
点击 停用62 , 带过去的参数还是61, dom节点和第一次带过去的一模一样

求解答

Answer 1

我模拟了楼主的方式，并不会有问题。

<div id="app">
        <table border="1">
            <tr v-for="(item, index) in array" :key="item.id">
                <td>{{index+1}}</td>
                <td>
                    <div>
                        <a href="javascript:void(0);" @click="offline(item.id,$event,index)">停用{{item.id}}-{{index}}</a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                array: [{ id: '1' }, { id: '2', }]
            },
            methods: {
                offline(val, event, index) {
                    console.log('event',event)
                    console.log('id', val)
                }
            }
        })
    </script>

多打下log看一下，多检查一下