[Vuejs]-Get multiple components instead of one. They are rendered from the list. vue.js

by

0👍

You can do it if you create a function inside each instrument component, which will call the parent component and search the first component instrument to find autosuggest. Function will be like that:

name: 'instrument',
...
computed: {
    autosuggestComponent () {

        // this is a pseudo code
        const parentChildrenComponents = this.$parent.children();
        const firstChild = parentChildrenComponents[0];
        const autosuggestEl = firstChild.$el.getElementsByTagName('autosuggest')[0];

        // return Vue component
        return autosuggestEl.__vue__;
    }   
},
methods: {
    useAutosuggestComponent () {
        this.autosuggestComponent.inputValue = this.inputValue;
        this.autosuggestComponent.suggests = [{...}];
    }
}

This solution is not so beautiful, but it allows to keep the logic inside the instrument component.

But my advice is create some parent component which will contain instrument components and I suggest to work with autosuggest through the parent. You can create autosuggest component in the parent and pass it to the children instruments. And if instrument doesn’t receive a link to a autosuggest (in props), than it will create autosuggest inside itself. It will allow to use instrument for different conditions.

Let me know if I need to explain my idea carefully.

👤Max Martynov

Leave a comment