element中el-form-item属性prop踩坑

el-form-item 是 ElementUI 中用于包装表单元素的组件，通常用于和 el-form 配合实现表单功能。el-form-item 提供了一个 prop 属性，用于指定表单项对应数据对象中对应属性的名称。

但是在使用 prop 属性时，需要注意一些坑点：

1. prop 值必须与表单数据对象中的属性名称保持一致，否则表单项将无法与数据对象进行双向绑定。

2. 如果表单数据对象中存在嵌套对象和数组，则 prop 值需要使用 . 和 [] 来指定对应属性名称或数组下标。

下面给出两个示例：

1. 嵌套数据对象
   假设我们需要实现一个表单，其中包含有一个嵌套的数据对象。数据对象 data 的结构如下：

{
  name: 'Jack',
  gender: 'male',
  contact: {
    email: '[e-mail]',
    phone: '1234567890'
  }
}

对应的表单元素如下：

<el-form :model="data">
  <el-form-item label="Name" prop="name">
    <el-input v-model="data.name"></el-input>
  </el-form-item>
  <el-form-item label="Gender" prop="gender">
    <el-radio-group v-model="data.gender">
      <el-radio label="male">Male</el-radio>
      <el-radio label="female">Female</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="Email" prop="contact.email">
    <el-input v-model="data.contact.email"></el-input>
  </el-form-item>
  <el-form-item label="Phone" prop="contact.phone">
    <el-input v-model="data.contact.phone"></el-input>
  </el-form-item>
</el-form>

注意到在 prop 属性中需要使用 . 符号指定嵌套属性的名称，如 prop="contact.email"。

1. 数组数据对象
   假设我们需要实现一个表单，其中包含有一个数组的数据对象。数据对象 data 的结构如下：

{
  name: 'Jack',
  hobbies: ['reading', 'swimming']
}

对应的表单元素如下：

<el-form :model="data">
  <el-form-item label="Name" prop="name">
    <el-input v-model="data.name"></el-input>
  </el-form-item>
  <el-form-item label="Hobbies" prop="hobbies">
    <el-checkbox-group v-model="data.hobbies">
      <el-checkbox label="reading">Reading</el-checkbox>
      <el-checkbox label="swimming">Swimming</el-checkbox>
      <el-checkbox label="coding">Coding</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</el-form>

注意到在 prop 属性中需要使用 [] 符号指定数组下标。这里使用的是 prop="hobbies"，表明该表单项对应的是整个数组，而不是其中的某个元素。同时，对于 el-checkbox-group，使用的是 v-model="data.hobbies" 来实现对整个数组的双向绑定。