Vue: <slot> element doesn't work inside <select>

[yyx990803]

Unfortunately this is just how HTML works, similar to how <slot> cannot be used in <table>.

The recommendation is that do not let users compose low-level DOM like this - instead, let the component take data props and render the options inside the component.

[jordanramstad]

I would have to +1 for fixing this, here is the reason @yyx990803

Try to make a markdown editor that you want to work like a regular textarea, so like <markdown-editor>markdown code here</markdown-editor>

In a none single page app the current markdown code would be passed within the textarea, so in the interest of making the component as usable as possible slot is the best option. Since passing it as a prop in this case would require the person using it to format the text and have the component unformat the text, so it could easily lead to issues.

Now I do agree with your thoughts on things like tables and such, actually textarea may be the only point this makes sense (but there could be more).

So my thought is something like this <textarea v-slot></textarea> This way the text area does not need to have the slot tags within the textarea and will push the content of slot right into the textarea normally.

I love vue but as soon as I seen this not work I cried :'( lol

[jordanramstad]

Discovered a way to achieve this.

<textarea v-text="$options._content.innerHTML"></textarea>

Could be cleaned up but it works!

Although innerText is probably better

[sebastiaanluca]

@jordanramstad I'm trying to achieve the same result as you (a textarea markdown editor). Yet your solution doesn't work anymore with Vue 2. Been searching for ages now with no result.

As noted, this doesn't work:

<markdown-editor>Some value retrieved from the database</markdown-editor>

<textarea>
    <slot></slot>
</textarea>

Only way to go would be to create a custom prop?

---

Update: the following snippet seems to work to get the default text between the tags used in the view (not the template) in Vue 2.0:

this.$slots.default[0].text