vue-tags-input icon indicating copy to clipboard operation
vue-tags-input copied to clipboard

README Update

Open 1e4 opened this issue 2 years ago • 0 comments

Thanks for this library, I found it after it being linked from the other repo as I needed Vue3 support.

With the upgrade from Vue2 to Vue3 the slots syntax has changed and I feel the README.md should reflect those changes as a gotcha or note.

Before I had

    <VueTagsInput
      v-model="user"
      :autocomplete-items="userResults"
      :add-only-from-autocomplete="true"
      @tags-changed="update"
      :placeholder="'Add User'"
    >
      <div slot="autocompleteItem"
           class="my-item"
           slot-scope="props"
           @click="props.performAdd(props.item)">
        {{ props.item.text }} ({{ props.item.rank }})
      </div>
    </VueTagsInput>

This has now changed to

    <VueTagsInput
      v-model="user"
      :autocomplete-items="userResults"
      :add-only-from-autocomplete="true"
      @tags-changed="update"
      :placeholder="'Add User'"
    >
      <template #autocomplete-item="{performAdd, item}">
        <div @click="performAdd(item)">
          {{ item.text }} - {{ item.rank }}
        </div>
      </template>
    </VueTagsInput>

As you can see the slot syntax changed quite a bit and the original documentation gives the wrong information.

I just want to leave this as a note in case other people wonder how to upgrade from vue2 to vue3

1e4 avatar Jun 22 '22 14:06 1e4