Get the component data from the external JS function

Question

Is it possible to get the component data from the external js function? I need to access markers, label and image.

Vue.component('home', {
        template: '#home',
        data: () => ({
            markers: [],
            label: '',
            image: ''
        }),
        // Life-cycle methods
        created() {
            document.title = 'home';

            ref.onSnapshot(snap => {
                snap.docChanges().forEach(change => {
                    const { type, doc } = change;

                    if (type == 'added') {
                        addMarker(doc.id, doc.data()); // Call Method
                    }
                });
            });
        }
    });

// Function outside the Vue.component (within same file)

function addMarker(id, data) {
    let m = new gm.Marker({
        map,
        animation: gm.Animation.DROP,
        position: data.position,
        label: data.label,
        image: data.image // Custom
    });

    markers.push(m); // Access Component Data - markers

    m.addListener('click', e => {
        label = m.label; // Access Component Data - label
        image = m.image; // Access Component Data - image
        info.open(map, m);
    });
}

Romalex · Accepted Answer · 2022-04-16 22:20:45Z

0

You can pass the component instance to your function as an argument

// component
created() {
    ...
    addMarker(this, doc.id, doc.data())
    ...
}

// external function
function addMarker(vm, id, data) {
    ...
    vm.markers.push(m)
    ...
}

answered Apr 16, 2022 at 22:20

Romalex

1,84615 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get the component data from the external JS function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related