Vuejs2 Handsontable-beforeRemoveTow是否可以异步?
期望值:Vuejs2 Handsontable-beforeRemoveTow是否可以异步?,vuejs2,handsontable,Vuejs2,Handsontable,期望值: beforeRemoveRow执行异步操作(转到数据库),然后返回false/true。如果为“false”,我希望该行不会从表中删除 行为: 即使我从beforeRemoveRow返回“false”,该行也会被删除 代码: 可与Vue.js进行手持通话 <template> <!-- ... --> </template> <script> import { mapState } from 'vuex' import hot from
beforeRemoveRow执行异步操作(转到数据库),然后返回false/true。如果为“false”,我希望该行不会从表中删除 行为:
即使我从beforeRemoveRow返回“false”,该行也会被删除 代码:
可与Vue.js进行手持通话
<template>
<!-- ... -->
</template>
<script>
import { mapState } from 'vuex'
import hot from '@/components/hot/index'
import { url } from '@/constants/api'
export default {
computed: {
...mapState({
clientAccounts: state => state.clients.clientAccounts,
token: state => state.auth.token
})
},
data () {
return {
hotSettings: {
beforeRemoveRow: async (index) => {
const confirmed = confirm('Do you really want to delete the user?')
if (confirmed) {
try {
const result = await this.$store.dispatch({
type: 'deleteClientAccount',
id: this.clientAccounts[index].id,
token: this.token,
})
console.log('result', result)
return true
} catch (err) {
return false
}
} else {
return false
}
},
contextMenu: ['remove_row']
}
}
},
components: {
hot: hot
}
}
</script>
从“vuex”导入{mapState}
从“@/components/hot/index”导入热
从“@/constants/api”导入{url}
导出默认值{
计算:{
…地图状态({
clientAccounts:state=>state.clients.clientAccounts,
令牌:state=>state.auth.token
})
},
数据(){
返回{
热设置:{
beforeRemoveTow:异步(索引)=>{
const confirm=confirm('确实要删除用户吗?')
如果(已确认){
试一试{
const result=等待此消息。$store.dispatch({
类型:“deleteClientAccount”,
id:this.clientAccounts[index].id,
token:this.token,
})
console.log('result',result)
返回真值
}捕捉(错误){
返回错误
}
}否则{
返回错误
}
},
上下文菜单:[“删除行”]
}
}
},
组成部分:{
热的:热的
}
}
我想知道这是否与'async'关键字有关?
当我删除'async'语法并使用promise时,它的行为与预期一致,不会删除行。但是,在这种情况下,它无法在删除行之前执行异步操作
编辑手持支持在他们的论坛中回答了这个问题: 钩子当前正在同步运行,只有返回false才能取消操作。 正如我看到的最后一条评论所建议的,使其异步工作是一个好主意。然而,目前,Handsontable只能在同步调用上工作,并且不可能只更改一个钩子。”
这就是说,如果有人找到了一个没有钩子的解决方法来防止基于数据库验证删除行,请分享。因为Handsontable是同步的,所以在调用Handsontable之前,我必须插入自己的函数 我使用的是旧的HandsontableRemoveRow插件(在1.11.0中删除),它在每行旁边添加了删除按钮。显然,如果你不使用RemoveRow插件,这看起来会不完全一样,但也许它可以给你一些想法
最初,该插件在按下按钮后立即调用Handsontable删除该行:
$(div).on('mouseup',函数(){
alter(“删除行”,行)//