tengo registro de datos
record: { address: { city: "" } }matriz de objetos que describen el campo
fields: [ { name: "address.city" ... } ]y tratar de generar formulario
<b-field v-for="field in fields" :key="field.name" :label="field.label" > <b-input v-model="record[field.name]" /> </b-field> y obtenga el elemento del objeto con una clave como address.name . nombre. Entiendo que debo pasar al record[address][city] pero ¿cómo hacerlo desde una cadena delimitada por puntos?
¿Es posible?
const getPathInObject = (path, object) => { const [current, ...rest] = path.split('.') return rest.length === 0 ? object[current] : getPathInObject(rest.join('.'), object[current]) } document.write(getPathInObject('abcd', { a: { b: { c: { d: 'hello' } } } })) const unflatten = obj => { const result = {}; Object.entries(obj).forEach(([key, value]) => { const [a, b] = key.split('.'); result[a] ||= {}; result[a][b] = value }) return result } new Vue({ el: "#app", data: { record_flat: {"address.city": '', "address.country": ''}, fields: [ { name: "address.city", label: 'city' }, { name: "address.country", label: 'country' } ] }, computed: { record: ({ record_flat }) => unflatten(record_flat), } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="{name, label} in fields" :key="name"> <label>{{ label }}</label><input v-model="record_flat[name]" /> <br> </div> <hr>Value of record = {{ record }} </div>Usé :value y @input en lugar v-model . Y lodash get y set
<b-input :value="get(data, field.name)" @input="set(data, field.name, $event)" />