I'm trying to bind fields to nested properties of the model using s simple example which you can reproduce by following these steps
<template>
<div id="app">
<form>
<formly-form :form="form" :model="model" :fields="fields"></formly-form>
<button type="submit">Submit</button>
</form>
<div>
<h3>Model</h3>
<div> {{ model }}</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import VueFormlyBootstrap from 'vue-formly-bootstrap';
import VueFormly from 'vue-formly'
Vue.use(VueFormly);
Vue.use(VueFormlyBootstrap);
export default {
name: 'app',
data () {
return {
form: {},
model: {
foo: {
first: '',
last: ''
}
},
fields: [
{key: 'foo.first', type: 'input'},
{key: 'foo.last', type: 'input'}
]
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
As you can see the model keys are incorrect. Is it the case the field values can only be bound to the root of the model, or have I made a mistake?
I'm trying to bind fields to nested properties of the model using s simple example which you can reproduce by following these steps
vue init webpack vue-formly-example. When prompted, don't install eslintnpm install vue-formly && npm install vue-formly-bootstrapApp.vuewith the followingnpm run devand enter some data in the fields, you should then see something like thisAs you can see the model keys are incorrect. Is it the case the field values can only be bound to the root of the model, or have I made a mistake?