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.