表格中使用 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
,通过改变其值达到重置的效果。