Vuetagger

Simple tag component for Vue.js 1.* and 2.0

Usage

The <template>

<vuetagger :value="tags" @change="updateTags"></vuetagger>

On your <script>

export default {

  components: {
    vuetagger: require('./Vuetagger')
  },

  data() {
    return {
      tags: []
    }
  },

  methods: {
    updateTags(tags) {
      console.log(tags)
    }
  }

}

Regex Pattern (optional)

You could add a regex pattern to the attribute. If the regex pattern does not match, the new tag wouldn't be added.

Here is the example with regex pattern I've taken from http://emailregex.com/

<vuetagger
  :value="tags"
  @change="updateTags"
  pattern="^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$"
></vuetagger>

License

MIT @ Mulia Arifandi Nasution