Binding Nested Property Dynamically

We are working on project where we are setting v-model from UI. Below is example of use case

const model = ref({
	address: {
		city: 'Mumbai'
	}
})

Now, we have string value of model key

const modelKey = "address.city"

that we are going to bind to input element like v-model="model.${modelKey}" or v-model="model[modelKey]" but I am pretty sure it doesn't work that way. We need to convert in some form of expression to work in v-model block.

Can you suggest how can we achieve such scenarios in vuejs?

vincent15000

3 years ago

Level 63

Does this work ?

v-model="model.address.city"

Or ...

v-model="model[address][city]"

swapnilnandgave

3 years ago

Level 10

@vincent15000 Thanks for reply but address.city is in different string variable and it is dynamic variable and value is set from UI by user.

v-model="model.address.city"

We can't hardcore like above

v-model="model[address][city]"

We can't use like above. If we convert like above then it doesn't consider as expression

1 like

vincent15000

3 years ago

Level 63

@swapnilnandgave If the string is address.city, you can manipulate it to extract the two variables.

const keys = "address.city";
const variables = keys.split(".");
...
v-model="model[variables[0]][variables[1]]"

But sure that means that you always have 2 keys.

swapnilnandgave

3 years ago

Level 10

@vincent15000 Yes it is good solution when you have 2 items but I need solution where when can set anything which is valid nested key like model.address.city.name model.person.firstName

Please or to participate in this conversation.