Get "Cannot read property 'textContent' of undefined" when binding elements to dropdown
SBajonczak opened this issue · 4 comments
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? :)
Hi, I need more details to figure out where this error comes from. Can you post which line of code made this error.
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
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!
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.