How to Use v-model for Nested Properties?

[hasan-ozbey]

Hi everyone,

I am having trouble using v-model with nested properties in Vue 3. I am trying to bind inputs to both top-level and nested properties in my data. It works fine for top-level properties like company_name, but it doesn’t work for nested ones like employer.country.

Here is a simple example of my code:

<script setup lang="ts">
type Employer = {
  country: string
}

type Experience = {
  company_name: string
  employer: Employer
}

const fields = [
  {
    name: 'company_name'
  },
  {
    name: 'employer.country'
  }
]

const records = reactive<Experience[]>([
  {
    company_name: 'X Company',
    employer: {
      country: 'USA'
    }
  }
])
</script>

<template>
  <div>
    <template
      v-for="(field, fieldIndex) in fields"
      :key="fieldIndex"
    >
      <div
        v-for="(record, recordIndex) in records"
        :key="recordIndex"
      >
        <input v-model="record[field.name]">
      </div>
    </template>
  </div>
</template>

When I use v-model for company_name, everything works fine. But for employer.country, the binding does not work, and I cannot update the value.

I think the problem is because of the dot notation (employer.country) in field.name. Is there a way to make this work? Or do I need to change how I write my code?

If anyone knows how to fix this or has any ideas, I would really appreciate it.

Thanks!

[hubdidub]

The problem is that your code effectively does this:

myObject['foo.bar']

which Javascript doesn't understand. You can only access properties that are present directly on the object with the bracket synax.

To make it work, you could write getter/setter functions for nested properties.
Here is a quick implementation (can probably be written better):

function getNested(object: Record<string, any>, path: string) {
  let result = object;
  for (const propertyName of path.split('.')) {
    if (!propertyName || !(propertyName in result)) {
      return undefined;
    }
    result = result[propertyName];
    if (!result || typeof result !== 'object') {
      break;
    }
  }
  return result;
}

function setNested(object: Record<string, any>, path: string, value: unknown) {
  let currentObject = object;
  const splitPath = path.split('.');
  for (let i = 0; i < splitPath.length; i++) {
    const propertyName = splitPath[i];
    if (!propertyName || !(propertyName in currentObject)) {
      return;
    }
    if (i === splitPath.length - 1) {
      currentObject[propertyName] = value;
      return; // Success!
    }
    currentObject = currentObject[propertyName];
    if (!currentObject || typeof currentObject !== 'object') {
      break;
    }
  }
  console.log('invalid path!')
}

But you can't use it directly with v-model. You have to split the v-model up like so:

<input
   :value="getNested(record, field.name)"
   @input="e => setNested(record, field.name, e.target.value)"
>

Demo

[hasan-ozbey]

Thank you so much! It's working perfectly. However, I’m a bit confused about the @input event. Should I replace it with the @change event when using a <select> element? Also, does v-model always listen to the @input event under the hood, or does it adapt based on the element type?

[hubdidub]

It's different for certain native HTML form elements.

• <input> with text types and <textarea> elements use value property and input event;
• <input type="checkbox"> and <input type="radio"> use checked property and change event;
• <select> uses value as a prop and change as an event.

From https://vuejs.org/guide/essentials/forms (not sure it's the complete list but I think so).

But these form elements are the exception. Normally, v-model is a short-hand for setting the model-value prop and reacting to the @update:model-value event.
For more info see https://vuejs.org/guide/components/v-model.html#under-the-hood