Get "Cannot read property 'textContent' of undefined" when binding elements to dropdown

[SBajonczak]

When I use following binding to a drop down:
<ou-dropdown v-model='value.AbsenceTypeId' label='Abwesenheitstyp'> <ou-dropdown-item v-for="item in this.$store.getters.myAbsenceTypes" v-bind:key="item.ID" v-bind:value="item.ID">{{item.Title}}</ou-dropdown-item> </ou-dropdown>

I get the following error:
vue.esm.js:523 TypeError: Cannot read property 'textContent' of undefined at Dropdown._checkTruncation (eval at e.exports (index.js:1), <anonymous>:2461:81) at new Dropdown (eval at e.exports (index.js:1), <anonymous>:2447:18) at VueComponent.mounted (index.js:1) at callHook (vue.esm.js:2556) at Object.insert (vue.esm.js:3383) at invokeInsertHook (vue.esm.js:5211) at Vue$3.patch [as __patch__] (vue.esm.js:5376) at Vue$3.Vue._update (vue.esm.js:2316) at Vue$3.updateComponent (vue.esm.js:2439) at Watcher.get (vue.esm.js:2778)

When I look into the vue inspector, there will be shown the elements but I didn't see it in the frontend.

What do I wrong? :)

[aidewoode]

Hi, I need more details to figure out where this error comes from. Can you post which line of code made this error.

[VincentBoots]

Got exactly the same issue. I try to load an array with v-for that is losser from an external webcall. Then it fails to load nut it creates the html object

[s-bauer]

Having the same problem! My code is the following:

<ou-dropdown v-model="selected" :label="label" placeholder="">
    <ou-dropdown-item v-for="opt in options" :value="opt.value.Id" :key="opt.name">{{ opt.name }}</ou-dropdown-item>
</ou-dropdown>

it fails when the options array is empty!

[jak-hammond]

The issue here is the internal component is not reactive to changes in the array. The only way I have found to get round this at the moment is to toggle the dropdowns visibility using a v-if directive. Then when the array has elements, this triggers a rerender of the component, the mounted() method is called and everything works as expected.