Quasar QSlideItem事件传参时如何获取reset()方法？

QSlideItem的@left/@right事件默认会传递一个包含reset()方法的事件对象作为参数。当你直接绑定函数名（比如@left="editTournament"）时，这个事件对象会自动作为第一个参数传入函数，所以能拿到reset()；但如果绑定的时候直接传递自定义参数（比如@right="deleteTournament(tournament)"），默认的事件对象会被覆盖，导致无法访问reset()。

解决方案：用箭头函数传递多个参数 #

通过箭头函数同时传递自定义参数和默认事件对象，这样就能在处理函数中同时拿到tournament和reset()：

模板代码

<q-slide-item 
  @left="editTournament"
  @right="(event) => deleteTournament(tournament, event.reset)"
>
  <!-- 你的滑动项内容 -->
</q-slide-item>

处理函数代码

// editTournament直接接收默认事件对象
function editTournament(event) {
  // 执行编辑逻辑
  event.reset() // 调用reset关闭滑动项
}

// deleteTournament同时接收自定义参数和reset方法
function deleteTournament(tournament, reset) {
  // 执行删除逻辑，比如调用API删除tournament
  // ...
  
  // 完成后调用reset关闭滑动项
  reset()
}

原理说明 #

当你使用@right="deleteTournament(tournament)"这种写法时，Vue会直接执行deleteTournament(tournament)，并把函数返回值（如果有的话）作为事件处理器，此时默认的事件对象并没有被传入函数。而通过箭头函数(event) => deleteTournament(tournament, event.reset)，我们手动捕获了QSlideItem传递的事件对象，并把其中的reset方法和自定义的tournament参数一起传给了处理函数，这样就能同时获取到两者。

内容的提问来源于stack exchange，提问作者Eirik Madland