Simple tag component for Vue.js 1.* and 2.0
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)
}
}
}
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>
MIT @ Mulia Arifandi Nasution