Revision history [back]

There are several solutions to avoid an empty object overwriting user input in a field in Vue.js:

1. Use a computed property: Instead of binding the form input directly to a data property, create a computed property that checks if the data property is empty, and if it is, returns the user input.

2. Use a watcher: Use a watcher to watch the data property and if it becomes an empty object, reset it to the user input.

3. Use v-model.lazy: The .lazy modifier on v-model will only update the data property after the user has finished inputting, preventing an empty object from being overwritten.

4. Use a validation function: Write a function that checks if the data property is a valid object and use it to validate the user input before assigning it to the data property.

5. Use a default value: Assign a default value to the data property that is not an empty object, so that if the user input is not valid, it does not overwrite the default value.