vue elementui异步给dom赋值无效问题
作者：空中湖
这篇文章主要介绍了vue elementui异步给dom赋值无效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue elementui异步给dom赋值无效
最近在研究el-admin，角色管理里面有个功能是点击左侧的表格里面的一个角色，右侧的树就会自动初始化。
于是我在点击的方法里面，去后台异步调用了一下接口，然后返回数据并把数据赋值给menuIds，但是我发现这个异步请求获取到的数据压根就不能让树控件刷新。
代码如下：
我是在handleCurrentChange里面操作的，网上说通过push方法能够起作用，但是根本没用，最后我的解决方法如下，先将ids都存储起来，然后再在nextTick方法里面去给menuIds赋值。
async initMenus(val) {
this.menuIds = []
const AV = window.AV
const role = AV.Object.createWithoutData('Role', val.objectId);
const roleMenuQuery = new AV.Query('RoleMenu');
roleMenuQuery.equalTo("role", role)
roleMenuQuery.include("menu")
var roleMenus = await roleMenuQuery.find()
var ids = [];
roleMenus.forEach(roleMenu => {
var roleMenuJson = roleMenu.toJSON()
ids.push(roleMenuJson.menu.menuId)
})
this.$nextTick(() => {
this.menuIds = ids;
})
// https://blog.csdn.net/xudalin/article/details/103158941
// 这个代码解决了树控件的半选问题。参考链接如上
/*ids.forEach((i, n) => {
var node = this.$refs.menu.getNode(i);
console.log(node.isLeaf)
if (node.isLeaf) {
this.$refs.menu.setChecked(node, true);
}
});*/
},
// 触发单选
handleCurrentChange(val) {
console.log("handleCurrentChange")
if (val) {
const _this = this
// 清空菜单的选中
this.$refs.menu.setCheckedKeys([])
// 保存当前的角色id
this.currentId = val.id
// this.showButton = this.level <= val.level
// 初始化
this.initMenus(val)
// 菜单数据需要特殊处理
/*val.menus.forEach(function (data, index) {
_this.menuIds.push(data.id)
})*/
}
},vue elementui前端异步方法转同步
elementui的表单验证功能
表单验证方法如果传入回调函数时是异步的
// 子组件的方法
validateForm(){
this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
return {valid: valid, hints: hints}
})
}
// 父组件调用,会发现校验结果,hints为undefine
submitAll(){
this.$refs.resourceEditorRef.forEach((item, index) => {
console.log(item.validateForm())
})
}修改成同步的
// 子组件方法
validateForm(){
// this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
// return {valid: valid, hints: hints}
// })
// return new Promise((resolve, reject) => {
// this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
// resolve({valid, hints})
// })
// })
//或者根据官网文档说明可以不传入回调函数,直接validate
return this.$refs.jsonEditor.getRef("form").validate
},
// 父组件调用
submitAll(){
// this.$refs.resourceEditorRef.forEach((item, index) => {
// console.log("校验结果", item.validateForm())
// })
this.$refs.resourceEditorRef.forEach(async (item, index) => {
let {valid, hints} = await item.validateForm()
console.info(valid, hints)
console.log("校验结果", hints)
})
}但是其实上面 submitAll 的 forEach 是有问题, 需要改成传统的for遍历, 因为 forEach 的入参是一个回调函数 , 简单的说就是执行 forEach 后会马上执行forEach后面的代码
所以修改成普通的for , 使用普通 for 循环的时候有需要多包一层
// 子组件方法
validateForm(){
//或者根据官网文档说明可以不传入回调函数,直接validate
return this.$refs.jsonEditor.getRef("form").validate
}
//父组件调用
submitAll(){
(async () => {
let submitAllForm = {};
for (let index = 0; index < this.$refs.resourceEditorRef.length; index++) {
const item = this.$refs.resourceEditorRef[index]
await item.validateForm().then(res => {
console.log("表单校验",res)
}).catch(res => {
console.log("表单校验catch",res)
if(res == false){
this.$message({ type: "error", message: "表单校验失败" });
// 有一个校验失败则直接返回
return;
}
})
}
//后续操作
})()
}或者
// 子组件方法
validateForm(){
return new Promise((resolve, reject) => {
this.$refs.jsonEditor.getRef("form").validate((valid, hints) => {
resolve({valid, hints})
})
})
}
// 父调用
submitAll(){
(async () => {
let submitAllForm = {};
for (let index = 0; index < this.$refs.resourceEditorRef.length; index++) {
const item = this.$refs.resourceEditorRef[index]
let {valid, hints} = await item.validateForm();
console.log("表单校验valid",valid)
console.log("表单校验hints",hints)
debugger
}
//后续操作
debugger
})()
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。