How to use an object with v-model in Vue

Everyone is very familiar with the v-model directive in Vue.js, which implements two-way data binding between components. But when manually implementing v-model for a custom component, you usually run into some issues.

The usual approach is as follows:

<code class="language-javascript">const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
<template></template></code>

Please note that we will not modify the value of the modelValue prop inside the component. Instead, we pass the updated value back to the parent component via the emit method, and the parent component makes the actual modifications. This is because: Child components should not affect the state of the parent component, which complicates the data flow and makes debugging difficult.

As stated in the Vue documentation, props should not be modified inside child components. If you do this, Vue will issue a warning in the console.

How is the subject doing?

Objects and arrays in JavaScript are a special case because they are passed by reference. This means that components can directly modify nested properties of object props. However, Vue does not warn about modifications in nested object properties (tracking these modifications incurs a performance penalty). Therefore, such unexpected changes can cause problems in your application that are difficult to detect and debug.

Most of the time we use the base value as v-model. However, in some cases, such as when building a form component, we may need a custom v-model that can handle objects. This leads to an important question:

How to implement a custom v-model to handle objects while avoiding the above pitfalls?

Discussion Questions

One way is to use a writable computed property or defineModelhelper function. However, both solutions have a significant drawback: they directly modify the original object, which defeats the purpose of maintaining a clear data flow.

To illustrate this problem, let’s look at an example of a “form” component. This component is designed to emit an updated copy of the object back to the parent component when the value in the form changes. We will try to achieve this using writable computed properties.

In this example, the writable computed property still modifies the original object.

<code class="language-javascript">import { computed } from 'vue';
import { cloneDeep } from 'lodash-es';

type Props = {
  modelValue: { name: string; email: string; };
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({ name: '', email: '' }),
});

const emit = defineEmits<{
  'update:modelValue': [value: Props['modelValue']];
}>();


const formData = computed({
  // 返回的getter对象仍然是可变的
  get() {
    return props.modelValue;
  },
  // 注释掉setter仍然会修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});</code>

This doesn't work because the object returned from the getter is still mutable, causing the original object to be modified unexpectedly.

defineModel Same thing. Since update:modelValue is not emitted from the component and the object properties are modified without any warning.

Solution

The "Vue way" of handling this situation is to use internal reactive values ​​to represent objects, and implement two observers:

1. An observer monitors the modelValue prop for changes and updates the internal value. This ensures that the internal state reflects the latest prop values ​​passed by the parent component.
2. An observer observes changes to internal values. When the internal value is updated, it emits a fresh cloned version of the object to the parent component to avoid directly modifying the original object.

To prevent an endless feedback loop between these two observers, we need to ensure that updates to the modelValue prop don't accidentally retrigger the observer for the inner value.

<code class="language-javascript">const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
<template></template></code>

I know what you’re thinking: “This is too much!” Let’s see how we can simplify it even more.

Simplify your solution with VueUse

Extracting this logic into a reusable composed function is a great way to simplify the process. But the good news is: we don’t even need to do that! The useVModel combined function in VueUse can help us deal with this problem!

VueUse is a powerful Vue utility library, often referred to as the "Swiss Army Knife" of composed utilities. It's fully tree-shakable, so we can use only the parts we need without worrying about increasing the size of the package.

Here is an example before refactoring using useVModel:

<code class="language-javascript">import { computed } from 'vue';
import { cloneDeep } from 'lodash-es';

type Props = {
  modelValue: { name: string; email: string; };
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({ name: '', email: '' }),
});

const emit = defineEmits<{
  'update:modelValue': [value: Props['modelValue']];
}>();


const formData = computed({
  // 返回的getter对象仍然是可变的
  get() {
    return props.modelValue;
  },
  // 注释掉setter仍然会修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});</code>

Much simpler!

That’s it! We've explored how to properly use objects with v-model in Vue without modifying it directly from child components. By using observers or leveraging compositional functions like VueUse's useVModel, we can maintain clear and predictable state management in our application.

Here is a Stackblitz link with all the examples in this article. Feel free to explore and experiment.

Thank you for reading and happy coding!

The above is the detailed content of How to use an object with v-model in Vue. For more information, please follow other related articles on the PHP Chinese website!