dropdown returns the entire tag object --need to show only tag content

[campgurus]

I am using this package with a tag input, pulling the list of tags from an external api and everything is working well, except this issue.

I can't figure out how to use the array of tag objects with { :id, :tag } but in the drop down show only the :tag.

here is the component:

              <vue-tags-input
                v-model="tag"
                v-on:keyup.native="getTags"
                :tags="tags"
                :autocomplete-items="filteredItems"
                :autocomplete-min-length=3
                @tags-changed="confirmedTags"
              />

and filteredItems returns an array of Tag objects.

[campgurus]

This is what the current drop down looks like:

[ryansorensen]

@campgurus you either have to override the template

      <template #tag-left="{tag}">
        <div v-if="tag.tagScope">
          {{ tag.tagScope.tagScopeName }}
        </div>
      </template>

or create a computed property / function that maps the text you want to display to the "text" property

 return tags.map(t => {
        t.text = t.tagName;
}};