vue-material
vue-material copied to clipboard
vuematerial
[MdOption] Cannot read property 'trim' of undefined
Steps to reproduce
Any HTML in an md-option triggers a Vue Warn reporting an error.
<md-field>
<label for="profile">Process Profile</label>
<md-select v-model="selected.profile" name="" :placeholder="placeholder.profile" id="profile">
<md-option v-for="(packet,index) in list.profiles" :key="packet.id" :value="index">
<span>Hello</span> World
</md-option>
</md-select>
</md-field>
Which browser?
Google Chrome 67.0.3396.99 (Official Build) (64-bit) VUE : 2.5.16 VUE Material : 1.0.0-beta-10.2
What is actually happening?
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'trim' of undefined" TypeError: Cannot read property 'trim' of undefined
Triggered by source:
getTextContent: function getTextContent() {
if (this.$el) {
return this.$el.textContent.trim();
}
var slot = this.$slots.default;
return slot ? slot[0].text.trim() : ''; // <--- call to trim() on undefined in this line
},
Reproduction Link
https://codesandbox.io/s/9o9jw9wy4y
Yes, I need to use color coded icons in the select list in my use case because a text label on it's own is insufficient but it does it if you put any html in there at all. For example if you want to make the first word bold Hello World
No formatted wrappers are allowed in the label... I don't see why that should not be allowed.
The labels work, just throw a false positive in console.
I found a work around... putting in-front of the html tag suppresses the issue... but you have to click the menu option value twice to make it select...
<md-option>
<span>Hello</span> World
</md-option>
If you want to use icons in options use Menu component, select is not created to handle other values then text inside.
Yes, but if the selection event got the selected items label html content instead of trying to get text only content to use in the select menus selected item display then it would work fine.
There is very little stopping this component from supporting html labels it would be counter intuitive to not have a html select menu support html labeling, after all this does not effect the value set in the :value attribute.
As of August 2020 there is still no movement on this. Ran into this knife in the belly as well.
As of August 2020 there is still no movement on this. Ran into this knife in the belly as well.
extremely knife in the belly 😭
As of August 2020 there is still no movement on this. Ran into this knife in the belly as well.
@Samuell1 Extremely knife in the belly. Still no update.
As of August 2020 there is still no movement on this. Ran into this knife in the belly as well.
Still no update. Had to duplicate the md-option component into our app, and rewrite it to work for our needs.
