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