How to use the concatenate names of the elements/options in one function in vue-select

Question

I have a project where I use many vue-select components.

My components:

... <v-select ref="select_1" :options="options_1" @search:focus="maybeLoad('1')"> </v-select> <v-select ref="select_3" :options="options_2" @search:focus="maybeLoad('2')"> </v-select> <v-select ref="select_3" :options="options_3" @search:focus="maybeLoad('3')"> </v-select> ...

My method:

...
maybeLoad(name) {
    // Vue.prototype.$options_select = 'options_' + name;
    // const options_select = 'options_' + name;
    return this.$options_select.length <= 0 ? this.load(name) : null
},
...

I was trying with Vue.prototype.$options_select or const options_select, but not working.

Error with Vue.prototype:

vue-select is empty.

Error with const options_select

TypeError: "this.$options_select is undefined; can't access its "length" property"

If I am using dedicated functions for every vue-select ... is working, every vue-select is filled with data from axios (with load() method).

Any ideas?

Answer 1

Found the solution:

        ...
        maybeLoad(name) {
            const options_select   = 'options_' + name;
            return this[options_select].length <= 0 ? this.load(name) : null
        },
        ...