Vue: Textarea's initial value is emptied in component if it contains html tags

[schtr4jh]

Jsfiddle vue v2.2.1: https://jsfiddle.net/dobuznsc/1/
Jsfiddle vue v1.0.12: https://jsfiddle.net/dobuznsc/2/

As you can see, there're 3 textareas and inputs in 3 different scopes:

• out of vue / body scope: textarea and input values as preserved, as expected
• root vue instance scope: textarea and input values are preserved, as expected
• component scope: input value is preserved, textarea's is not (in v2), however, they are preserved in v1

My question is, why are textareas in root and component scope handled differently, is this a bug?

[posva]

Because the component template is compiled by vue while the other one is interpreted by the browser before vue can compile it.
Inside of textareas only text can be entered, therefore when Vue tries to put HTML inside of it, the browser probably ignores that. What you actually want is to write an escaped version of it: <textarea>&lt;p&gt;Component textarea&lt;/p&gt;</textarea>

Maybe we could add a development warning, but basically, you cannot write unescaped HTML inside of a textarea. More specifically, you can only write text. The browser escapes it for convenience I guess.

[schtr4jh]

Great, makes sense, it works with escaped HTML. I didn't even think about escaping since it worked in v1.

[yyx990803]

Technically we can make the HTML parser treat the entire content of <textarea> as a string. This could use a PR if anyone is up for it.

[nickmessing]

I can try that, I'm not sure I will manage to do that but I will try