Vue+ElementUI dynamically creates Form form data binding problems

In the

project, Vue+ElementUI is used to dynamically create the form, pass in json string data, and generate the corresponding form form. If you want to use v-model for data binding, the result is an error. The code is as follows:

template section:

<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 section:

 var myData = {
    formData: { //
      name: "Tom",
    },
  }
  export default {
    name: "app",
    data() {
      return {
        myData,
        formDataJson: [
          {  //Json
          type: "input",
          label: "name",
          val: myData.formData.name,
        }
        ]
      }
    },
  }
< hr >

actual display:

< hr >

my data name needs to be stored in myData.formData, and val is also the corresponding myData.formData.name. But when the input value is changed, the name remains the same. I don"t know what went wrong and how to bind the data. Ask for help


should be in a different form

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

input box:

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

try assigning a value to data in the mounted or created lifecycle

Menu