表格中使用 q-toggle 切换失败时无法重置到初始状态!!

在表格中自定义插槽,用到q-toggle切换,切换失败时q-toggle组件显示仍为切换成功后的状态。

插槽内容:

<!-- 表格内容 -角色插槽 -->
<template v-slot:body-cell-role="props">
  <q-td :props="props">
    <q-toggle
      color="green"
      true-value='SVIP'
      false-value='VIP'
      checked-icon="check"
      unchecked-icon="clear"
      v-model="props.row.role"
      :label="props.row.role"
      @input="roleToggle(props.row._id, $event, props.row)"
    />
  </q-td>
</template>

input 事件:

// 角色状态改变
roleToggle (_id, role, row) {
  this.$q.dialog({
    title: '修改用户权限',
    message: '确定要修改用户权限吗?',
    ok: {
      push: true,
      label: '确定'
    },
    cancel: {
      push: true,
      color: "negative",
      label: '取消'
    }
  }).onOk(() => {
    this.loading = true
    EditUserById(_id, { role }).then(res => {
      this.loading = false
      // 修改成功
      this.$q.notify({
        message: res.msg,
        color: 'primary'
      })
    }).catch(err => {
      this.loading = false
    })
  }).onOk(() => {
    // console.log('>>>> second OK catcher')
  }).onCancel(() => {
    // console.log('>>>> Cancel')
    row.role = role === 'SVIP' ? 'VIP' : 'SVIP'
  }).onDismiss(() => {
    // console.log('I am triggered on both OK and Cancel')
  })

所绑定的input事件中,除了传递官方文档种的两个参数,额外再传一个props.row,通过改变其值达到重置的效果。