Compiling bindings inside a v-model directive

I would like to use some of my VM data inside a v-model directive. As an example:

http://jsfiddle.net/6ZX3C/1/

The second textarea is my desired result but as you can see it does not have a v-model directive on it. Is there a workaround or better way to approach this? Also interestingly enough it works fine for the input box, the textarea is the one not compiling correctly.

Thanks!

Also interesting thing I noticed. If you inspect the broken textarea the correct values are there, but to us they are still showing the double curly braces? O_O

[jcaxmacher]

This is an interesting issue and neat use of Vue. I tried getting it to work by breaking it into a component:

http://jsfiddle.net/obsoleter/6ZX3C/3/

But it has the same issue. I think it has to do with some textarea idiosyncrasies. The correct value you see in the inspector is, I think, the textareaElement.defaultValue attribute. For some reason, v-model is stuck thinking the uncompiled text is the value and overwrites the compiled text.

[jcaxmacher]

This awful hack of compiler.js causes the compiled textarea content to be pushed back into its value attribute, but does not trigger the change event, so does not update the model:

diff --git a/src/compiler.js b/src/compiler.js
index 1252a45..15aff31 100644
--- a/src/compiler.js
+++ b/src/compiler.js
@@ -456,7 +456,7 @@ CompilerProto.compileTextNode = function (node) {

     var tokens = TextParser.parse(node.nodeValue)
     if (!tokens) return
-    var el, token, directive
+    var el, token, directive, parentNode, val

     for (var i = 0, l = tokens.length; i < l; i++) {

@@ -486,7 +486,12 @@ CompilerProto.compileTextNode = function (node) {
         this.bindDirective(directive)

     }
-    node.parentNode.removeChild(node)
+    parentNode = node.parentNode
+    parentNode.removeChild(node)
+    val = parentNode.value
+    if (parentNode.tagName === 'TEXTAREA') utils.nextTick(function () {
+        parentNode.value = val
+    });
 }

 /**

[yyx990803]

fixed in 5872bf3

[jcaxmacher]

Brandon's original example is working for me with that commit, but this one is not:

http://jsfiddle.net/obsoleter/6ZX3C/3/

Should it? I see Error parsing expression: > yield

[yyx990803]

The content inside a textarea is parsed as a value attribute of the textarea element, so it doesn't allow partials which are DocumentFragments. You can get around by setting it with this.$compiler.rawContent though: http://jsfiddle.net/yyx990803/6ZX3C/5/

[jcaxmacher]

That clarifies it. Thank you!