Hola amigos, estoy usando esta entrada de etiquetas de origen para mi proyecto, pero solo necesito que se ingresen 5 etiquetas después de eso, no debería permitir que las etiquetas se ingresen en el campo de entrada. El campo de entrada ahora puede recibir etiquetas ilimitadas, pero no sé cómo limitarlo
por favor guíame
Gracias por adelantado.
function tagSelect() { return { open: false, textInput: '', tags: [], init() { this.tags = JSON.parse(this.$el.parentNode.getAttribute('data-tags')); }, addTag(tag) { tag = tag.trim() if (tag != "" && !this.hasTag(tag)) { this.tags.push( tag ) } this.clearSearch() this.$refs.textInput.focus() this.fireTagsUpdateEvent() }, fireTagsUpdateEvent() { this.$el.dispatchEvent(new CustomEvent('tags-update', { detail: { tags: this.tags }, bubbles: true, })); }, hasTag(tag) { var tag = this.tags.find(e => { return e.toLowerCase() === tag.toLowerCase() }) return tag != undefined }, removeTag(index) { this.tags.splice(index, 1) this.fireTagsUpdateEvent() }, search(q) { if ( q.includes(",") ) { q.split(",").forEach(function(val) { this.addTag(val) }, this) } this.toggleSearch() }, clearSearch() { this.textInput = '' this.toggleSearch() }, toggleSearch() { this.open = this.textInput != '' } } }Puede actualizar la función fireTagsUpdateEvent() para deshabilitar la entrada cuando hay 5 (o más) etiquetas
fireTagsUpdateEvent() { this.$refs.textInput.setAttribute('disabled', this.tags.length >= 5) this.$el.dispatchEvent(new CustomEvent('tags-update', { detail: { tags: this.tags }, bubbles: true, })); },