vue绑定空对象的属性,以及重置一个对象,怎么解决比较好?
有时候,一个对象的属性只有从接口获取到数据之后才存在,但页面上已经绑定了,所以会报错,这种情况,可以事先把对象的结构定义出来,或者在模板中用v-if,各位大神是否有更好的办法?
还有,添加和编辑功能往往用的是同一个组件,编辑完成之后需要清空各input的数据,请教,这件事情是否有好办法?
回答:
第一个问题:可以使用 <div v-if="a&&a.b"></div>
这样的方式去判断。
第二个问题,一般来说我会直接 this.formData = {}
来处理,很简单。因为绑定的值是 undefined
一般来说是没问题的,除非说有一些时候需要绑定数组情况才会单独去声明。
另外如果说是使用的 AntD Vue
的 a-form
或者 a-form-model
时,我会使用 this.form.resetFields()
或者 this.$refs.aForm.resetFields()
来重置表单。EleUI
也是同理,也可以直接 this.formData = {}
或者 this.$refs.elForm.resetFields()
来重置。
所以我的自定义的弹窗编辑组件一般会设计成这样:
<template> <a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
cancelText="关闭"
@ok="handleOk"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form-model ref="form" v-bind="layout" :model="model" :rules="validatorRules">
<a-form-model-item label="角色编码" required prop="roleCode">
<a-input v-model="model.roleCode" placeholder="请输入角色编码"/>
</a-form-model-item>
<a-form-model-item label="角色名称" required prop="roleName">
<a-input v-model="model.roleName" placeholder="请输入角色名称"/>
</a-form-model-item>
<a-form-model-item label="描述" prop="description">
<a-textarea :rows="5" v-model="model.description" placeholder="请输入角色描述"/>
</a-form-model-item>
</a-form-model>
</a-spin>
</a-modal>
</template>
<script>
import { addRole, editRole, duplicateCheck } from '@/api'
export default {
name: "RoleModal",
data () {
return {
title:"操作",
model: {},
layout: {
labelCol: { span: 3 },
wrapperCol: { span: 14 },
},
validatorRules:{
roleName: [
{ required: true, message: '请输入角色名称!' },
{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
],
roleCode: [
{ required: true, message: '请输入角色名称!'},
{ min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
{ validator: this.validateRoleCode}
],
description: [
{ min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }
]
},
// 控件状态
visible: false,
roleDisabled: false,
confirmLoading: false,
}
},
methods: {
add () {
this.edit({});
},
edit (record) {
this.model = { ...record };
this.visible = true;
},
close () {
this.visible = false;
this.$emit('close');
this.$nextTick(() => {
this.$refs.form.resetFields();
})
},
handleCancel () {
this.close()
},
handleOk () {
// 触发表单验证
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
const data = {
...this.model
}
let httpAction = addRole;
if(this.model.id) httpAction = editRole
httpAction(data).then(res => {
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
} else {
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
that.close();
})
}
})
},
validateRoleCode(rule, value, callback){
if(/[\u4E00-\u9FA5]/g.test(value)) return callback("角色编码不可输入汉字!");
const data = {
tableName: "sys_role",
fieldName: "role_code",
fieldVal: value,
dataId: this.model.id,
};
duplicateCheck(data).then(res => {
if(res.success) {
callback();
} else {
callback(res.message);
}
});
}
}
}
</script>
本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
回答:
对于第一个问题,我认为定义一个初始值为空的对象或者使用 TypeScript 等强类型语言可以有效地避免属性未定义的问题。例如,你可以在代码中定义一个空对象,然后从接口获取数据后,将数据属性合并到这个对象中,确保每个属性都已经定义:
// 定义一个空对象
const myObject = {};
// 从接口获取数据后,合并到空对象中
const response = await fetch('api/data');
const data = await response.json();
Object.assign(myObject, data);
对于模板中使用 v-if 的问题,你可以使用可选链操作符 ?.,它可以检查对象是否存在属性,如果存在则返回属性值,否则返回 undefined。例如:
<div>{{ myObject?.property }}</div>
这样,在对象属性不存在的情况下,页面不会报错,而是显示一个空值。
对于第二个问题,你可以使用 Vue 提供的 v-model 指令和 reset() 方法来清空表单数据。你可以在表单中使用 v-model 绑定表单数据的值,然后在提交表单后调用 reset() 方法清空表单。例如:
<template>
<form @submit.prevent="submitForm">
<input type="text" v-model="myInput"><button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return { myInput: ''
};
},
methods: {
submitForm() { // 提交表单后清空数据
this.$refs.myForm.reset();
this.myInput = '';
}
}
};
</script>
在上面的示例中,我们使用了 reset() 方法清空表单,并将绑定的表单数据 myInput 设置为空字符串。
以上是 vue绑定空对象的属性,以及重置一个对象,怎么解决比较好? 的全部内容, 来源链接: utcz.com/p/933777.html