A while back, in 2019, I wrote an article demonstrating how to create a custom Vue component, and handle the v-model capabilities:
https://dev.to/valentinprgnd/wrap-a-text-field-in-a-component-with-vue-js-gak
I recently discovered an alternative way to do it, which does not require a watcher, thus making the code much faster and less resource heavy.
The original post suggested this method:
<template>
<div class="custom-input">
<input v-model="localValue" placeholder="Enter your name">
</div>
</template>
<script>
export default {
name: "TextField",
props: {
value: String // 1. Receives the value as a prop
},
data() {
return {
localValue: ""
};
},
created() {
this.localValue = this.value; // 2. Copy the value in a local value variable
// Set a watcher to emit the changes to the parent component
this.$watch("localValue", value => {
this.$emit("input", value);
});
}
};
</script>
While functional, the use of a watcher here can be really resource heavy (particularly if you create a lot of such components).
A better approach would be to use a computed property, like so:
<template>
<div class="custom-input">
<input v-model="localValue" placeholder="Enter your name">
</div>
</template>
<script>
export default {
name: "TextField",
props: {
value: String // 1. Receives the value as a prop
},
computed: {
localValue: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value);
}
}
};
</script>
Not only it reduces the boilerplate code, but it also avoids the use of a watcher, making your component faster and less resource heavy 🎉
Top comments (0)