Vue.js Tip #5 Tag list component

Following last tip, we are going to create a component to list tags.

We learned that a component to supports v-model, needs 2 things: get data through value property and emit changed data with a input event.

Our tag list component, get an array of tags that can be deleted, iterates over it rendering the label and a remove button. The remove method, first clone the original Array (arrays in javascript are references), removes the index and emit this new changed array.

{
  template: `<div>
               <span v-for="tag, index in value">
                 {{tag}}
                 <button @click="remove(index)">x</button>
               </span>
             </div>`,
  props: ['value'], // Array of tags
  methods: {
    remove (index) {
      var clonedValue = this.value.slice()
      clonedValue.splice(index, 1)
      this.$emit('input', clonedValue)
    }
  }
}

final code

Things to remember

1. v-model injects data into value property and expect a input event with the new one.
2. Use Array.slice()to clone a Array.
3. Use Array.splice(index, 1) to remove a item from the Array, or this.$delete(array, index) new in Vue 2.2.