利用Element-Ui重构vue-online-shop项目时遇到的问题
相关问题
el-form表单数据双向绑定无法编辑
在ProductForm商品更新组件中,利用el-form表单展示商品信息,通过v-model双向绑定商品信息至表单组件中。
<el-form >
<el-form-item label="Name">
<el-input v-model="model.name"></el-input>
</el-form-item>
<el-form-item label="Price">
<el-input v-model="model.price"></el-input>
</el-form-item>
<el-form-item label="Manufacturer ">
<el-select
v-model="model.manufacturer.name"
clearable
placeholder="请选择制造商"
>
<el-option
v-for="manufacturer in manufacturers"
:key="manufacturer._id"
:label="manufacturer.name"
:value="manufacturer.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Image ">
<el-input v-model="model.image"></el-input>
</el-form-item>
<el-form-item label="Description ">
<el-input type="textarea" v-model="model.description"></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="onSubmit"
>Update Product</el-button >
</el-form-item>
</el-form>
问题
在编辑商品信息页面的表单中,点击表单组件无法编辑商品信息。
原因及解决方法
原因:由于该表单组件中的商品对象是通过父子传值的方式从父组件获取,然而父组件中商品对象是通过计算属性的方式从store实例中获取的,因此该商品对象是随着本地存储的商品数据变化而变化,无法根据双向绑定来修改该商品对象,也就造成了无法编辑表单组件。
解决方法:对于el-form表单中进行双向绑定的数据不能来自计算属性,应该来自data属性,因此我们需要新定义一个modelData属性并设置默认值,然后在组件刚被创建时将父组件传来的商品对象进行解构赋值给modelData,然后将数据展示到表单中,并当用户编辑表单组件时通过watch监测用户输入的新数据然后赋值给modelData,进而将修改完成的新商品对象modelData发送给后端进行数据同步更新。
<el-form >
<el-form-item label="Name">
<el-input v-model="modelData.name"></el-input>
</el-form-item>
<el-form-item label="Price">
<el-input v-model="modelData.price"></el-input>
</el-form-item>
<el-form-item label="Manufacturer ">
<el-select
v-model="modelData.manufacturer.name"
clearable
placeholder="请选择制造商"
>
<el-option
v-for="manufacturer in manufacturers"
:key="manufacturer._id"
:label="manufacturer.name"
:value="manufacturer.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Image ">
<el-input v-model="modelData.image"></el-input>
</el-form-item>
<el-form-item label="Description ">
<el-input type="textarea" v-model="modelData.description"></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
native-type="submit"
@click="onSubmit"
>Update Product</el-button >
</el-form-item>
</el-form>
第一次写这么多字的博客,如果本文对你有帮助的话还请点赞支持一下。
另外如果哪里有错误的话还请各位大佬指出来,互相学习。