How to use dot delimited string as object path for vue v-model directive

Question

I have data record

record: {
  address: {
   city: ""
  }
}

array of objects that describe field

fields: [ 
  {
    name: "address.city"
    ...
  }
]

and try to generate form

and get object item with key like address.name I understand that i should pass to v-model record[address][city] but how to do it from dot delimited string?

Is it possible?

user_15208373 · Answer

const getPathInObject = (path, object) => {
  const [current, ...rest] = path.split('.')
  return rest.length === 0
    ? object[current]
    : getPathInObject(rest.join('.'), object[current])
}

document.write(getPathInObject('a.b.c.d', { a: { b: { c: { d: 'hello' } } } }))

EDIT maybe something like this. verry hacky though

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),
  }
})



  
     {{ label }} 
     

  
  Value of record = {{ record }}

user_17580542 · Answer

I used :value and @input instead v-model. And lodash get and set

How to use dot delimited string as object path for vue v-model directive

2 Answers