Vue.js Tip #6 Tag editor component

To finish our tag component, we are going to wrap the tag-input and tag-list in a single tag-editor control.

A good practice in Vue.js is to create tiny and specific controls, that are put together to compose bigger components, like this:

The pieces are independent and reusable. To bind, we can use the same template from tip #3.

{
template: '<input v-model="editableValue">',
props: ['value'],
computed: {
editableValue: {
get () { return this.value }
set (newValue) { this.$emit('input', newValue) }
}
}
}

Applying this template to our component, after some adjusts, this is the result:

And finally, all three components together:

And that's it for a tiny but funcional tag editor component.
Show your support

Clapping shows how much you appreciated Marcos Neves’s story.