利用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>

第一次写这么多字的博客，如果本文对你有帮助的话还请点赞支持一下。
另外如果哪里有错误的话还请各位大佬指出来，互相学习。