- 将数据放到
computed
中,不能放到data
中,如果放到data
中则在表单中的input,select
等的v-mode
l属性是不能赋值的,如:v-model='form.type_id'
,如果新增,那么form.type_id
是没有内容的,会报错,cannt read property type_id of null
,尝试实用lodash
的_.get(form,'type_id',0)
会报错,filter也不行。 - 代码
<el-dialog title="添加" :visible.sync="isOpenModal">
<el-form label-width="70px">
<el-form-item label="商品类型" label-width="70px">
<el-select placeholder="请选择" v-model="form.utype_id">
<el-option
v-for="item in goodsType"
:key="item.id"
:label="item.u_name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="商品名称">
<el-input v-model="form.ugoods_name"></el-input>
</el-form-item>
<el-form-item label="缩略图">
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:headers="uploadHeaders"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img
v-if="imageUrl"
:src="imageUrl"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="售价">
<el-input v-model="form.price"></el-input>
</el-form-item>
<el-form-item label="库存">
<el-input v-model="form.stock"></el-input>
</el-form-item>
<el-form-item label="状态">
<template>
<el-radio v-model="form.status" :label="1">上架</el-radio>
<el-radio v-model="form.status" :label="2">下架</el-radio>
</template>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="isOpenModal = false">取 消</el-button>
<el-button type="primary" @click="saveGoods">确 定</el-button>
</span>
</el-dialog>
computed: {
form() {
if (this.formData === null) {
return {
utype_id: '',
ugoods_name: '',
price: 0,
stock: 0,
status: 1,
picture: '',
}
} else {
return this.formData;
}
}
},
data() {
return {
formData: {},
action: '',
isOpenModal: false,
};
},
mounted() {
this.getData();
},
watch: {
isOpenModal(newV, oldV) {
console.log(oldV, newV)
if (newV !== oldV && newV === false) {
this.formData = {};
}
}
},