Vue+ElementUI 动态创建Form表单数据绑定问题

Question

项目中使用Vue+ElementUI动态创建表单，传入json串数据，生成对应的form表单，想使用 v-model 进行数据绑定，结果出错。 代码如下：

template部分：

<el-form label-width="120px">
   <el-form-item v-for="(item,index) in formDataJson" :label="item.label">
      <el-input v-if="item.type === 'input'" v-model='item.val'></el-input>
   </el-form-item>
</el-form>
<h2>{{myData.formData.name}}</h2>

js部分：

 var myData = {
    formData: { //存储数据
      name: 'Tom',
    },
  }
  export default {
    name: 'app',
    data() {
      return {
        myData,
        formDataJson: [
          {  //Json串
          type: 'input',
          label: 'name',
          val: myData.formData.name,
        }
        ]
      }
    },
  }

---

实际显示：

---

我的数据 name 需要存储在myData.formData中， val也是对应的 myData.formData.name 但是改变input值时，name还是不变，不知道哪里出错了，应该怎么绑定数据呢，求助

Answer 1

应该换一种形式

export default {
    name: 'app',
    data() {
      return {
        myData,
        formDataJson: [
          {  //Json串
          type: 'input',
          label: 'name',
          val: 'name',
        }
        ]
      }
    },
  }

输入框：

<el-input v-if="item.type === 'input'" v-model='myData.formData[item.val]'></el-input>

Answer 2

试试在mounted或者created生命周期里面为data赋值