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.