【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化

【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化_第1张图片

【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化_第2张图片

 

 

【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化_第3张图片

        实现要求:再点击每一行的修改按钮时,动态拿取该行的id传给后端作为pk(主键)实现数据库数据的修改,并显示在vue前端;

        我遇到的问题:2处使用 scope 作用域插槽拿取每一行的数据,在3处,删除按钮那一行代码,点击每一行的删除按钮的时候都可以拿到该行的id,传输给deleteData()函数然后调用后端接口操作数据库,成功删除该行数据,但在4处时,不管点击那一行的保存按钮都只能拿到最后一行数据的id号,初步判断是4处的scope.row.id套的标签太多了,导致调用时有问题;

现解决思路如下:

  1. 在点击修改按钮时,将该行的id通过触发函数临时保存下来
  2. 点击保存按钮时,将上一步临时保存的id取出来,赋给4处的savePermissions()函数

①触发函数临时保存id

【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化_第4张图片

② 在data () {return { }} 里注册变量【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化_第5张图片

③在methods编写函数保存下来【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化_第6张图片

 ④在点击保存按钮触发的函数中,调用该变量,传给后端

【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化_第7张图片

 ⑤后端拿到前端返回的数据,调用时发现id跟随变化

【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化_第8张图片

 ⑥为了严谨一点,在点击取消按钮时,将该id置空

【vue3】解决scope.row.id套标签太多无法随着点击按钮而变化_第9张图片

 

你可能感兴趣的:(vue.js,前端,javascript)