search

aidewoode / office-ui-fabric-vue

Office UI Fabric implementation for Vue.js
https://aidewoode.github.io/office-ui-fabric-vue/
Other
273 stars 30 forks source link

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

Open SBajonczak opened 6 years ago

SBajonczak commented 6 years ago

When I use following binding to a drop down: `

{{item.Title}} 
    </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 commented 6 years ago

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

VincentBoots commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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.