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

Cannot read property 'update:tags' of undefined

Open saadabdurrazaq opened this issue 3 years ago • 12 comments

As soon as I install this package I got this error Cannot read property 'update:tags' of undefined

saadabdurrazaq avatar Aug 27 '21 14:08 saadabdurrazaq

Is there any updates on it? Has the same issue. Use Vue.js (v.3), install this package, create new component, insert all code from the example and got this. Please, clarify, why it is happening! Thank you in advance!

VerstovDI avatar Oct 24 '21 11:10 VerstovDI

Any update on this? Looking to use this for vue3

keatonconrad avatar Feb 17 '22 19:02 keatonconrad

Seems like there are no Updates yet. Still same Problem

NinoLeon avatar Jun 14 '22 12:06 NinoLeon

Commenting to follow. I am also running into this issue

LucasNLage avatar Sep 30 '22 18:09 LucasNLage

Has anyone found a solution to this yet?

LucasNLage avatar Oct 11 '22 16:10 LucasNLage

same issue, is there something else available?

tse-lao avatar Nov 10 '22 12:11 tse-lao

This issue has been open since 2021 and no one has dropped feedback.

Derinsola16 avatar Mar 21 '23 20:03 Derinsola16

Any update?

juanhuerta avatar Apr 01 '23 18:04 juanhuerta

We need this to be fixed ASAP

jewells77 avatar May 05 '23 08:05 jewells77

I don't know much about Vue, but this is what I've found if helpful. I believe the issue stems from vue-tags-input's dependence on a 'private' property _events. https://github.com/JohMun/vue-tags-input/blob/294026aeed583154df3aeaf9f8007136404c132e/vue-tags-input/vue-tags-input.js#L355

Looking at the Vue source, it looks like this _events property is attached to the component instance here: https://github.com/vuejs/vue/blob/49b6bd4264c25ea41408f066a1835f38bf6fe9f1/src/core/instance/init.ts#L60 The only call to initEvents I could find in my brief search was in initMixins, but the way I'm attempting to instantiate my component, initMixins is never called:

tags-input.js

const app = createApp({
    data() {
        return {
            tag: "",
            tags: [],
        };
    },
});

app.component("VueTagsInput", VueTagsInput);
app.mount("#my-app");

another-file.html

<div id="my-app">  
    <vue-tags-input v-model="tag"
        :tags="tags"
        @tags-changed="newTags => tags = newTags" />
</div>


If this lib is working for other people, I bet it's due to how they're registering the VueTagsInput component. In my app, I don't have a build system setup, so I thought I'd need to register the component this way. I haven't found a solution yet, but maybe that helps someone.

Also there's this about global mixins on the Vue doc:

"Not Recommended

Mixins are supported in Vue 3 mainly for backwards compatibility, due to their widespread use in ecosystem libraries. Use of mixins, especially global mixins, should be avoided in application code.

For logic reuse, prefer Composables instead.

https://vuejs.org/api/application.html#app-mixin

harveysanders avatar May 26 '23 20:05 harveysanders

As I just now stumbled upon this issue: there's now https://www.npmjs.com/package/@sipec/vue3-tags-input as a drop-in replacement that works with Vue 3.

moqmar avatar Jun 19 '23 11:06 moqmar