限制输入标签最多 5 个标签

Question

嗨朋友们，我正在为我的项目使用this source 标签输入，但我只需要输入 5 个标签，之后它不应该允许将标签输入到输入字段中。 输入框现在可以接收无限标签了，但是不知道怎么限制

请指导我

提前致谢。

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 != ''
    }
  }
}

Answer 1

当有 5 个（或更多）标签时，您可以更新 fireTagsUpdateEvent() 函数以禁用输入

fireTagsUpdateEvent() {
  this.$refs.textInput.setAttribute('disabled', this.tags.length >= 5)
  this.$el.dispatchEvent(new CustomEvent('tags-update', {
    detail: {
      tags: this.tags
    },
    bubbles: true,
  }));
},