fix(ssr): properly render textarea value

partial fix for vuejs#6986
f2009 · Jan 25, 2019 · 68a77d6 · 68a77d6
1 parent f45acd0
commit 68a77d6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 0 deletions.
diff --git a/src/platforms/web/server/modules/dom-props.js b/src/platforms/web/server/modules/dom-props.js
@@ -27,7 +27,10 @@ export default function renderDOMProps (node: VNodeWithData): string {
       setText(node, props[key], true)
     } else if (key === 'textContent') {
       setText(node, props[key], false)
+    } else if (key === 'value' && node.tag === 'textarea') {
+      setText(node, props[key], false)
     } else {
+      // $flow-disable-line (WTF?)
       const attr = propsToAttrMap[key] || key.toLowerCase()
       if (isRenderableAttr(attr) &&
         // avoid rendering double-bound props/attrs twice

diff --git a/src/server/optimizing-compiler/codegen.js b/src/server/optimizing-compiler/codegen.js
@@ -205,6 +205,9 @@ function childrenToSegments (el, state): Array<StringSegment> {
   if ((binding = el.attrsMap['v-text'])) {
     return [{ type: INTERPOLATION, value: `_s(${binding})` }]
   }
+  if (el.tag === 'textarea' && (binding = el.attrsMap['v-model'])) {
+    return [{ type: INTERPOLATION, value: `_s(${binding})` }]
+  }
   return el.children
     ? nodesToSegments(el.children, state)
     : []

diff --git a/src/server/optimizing-compiler/modules.js b/src/server/optimizing-compiler/modules.js
@@ -31,6 +31,10 @@ export function applyModelTransform (el: ASTElement, state: CodegenState) {
       const dir = el.directives[i]
       if (dir.name === 'model') {
         state.directives.model(el, dir, state.warn)
+        // remove value for textarea as its converted to text
+        if (el.tag === 'textarea' && el.props) {
+          el.props = el.props.filter(p => p.name !== 'value')
+        }
         break
       }
     }

diff --git a/test/ssr/ssr-string.spec.js b/test/ssr/ssr-string.spec.js
@@ -1009,6 +1009,31 @@ describe('SSR: renderToString', () => {
       done()
     })
   })
+
+  it('render v-model with textarea', done => {
+    renderVmWithOptions({
+      data: { foo: 'bar' },
+      template: '<div><textarea v-model="foo"></textarea></div>'
+    }, result => {
+      expect(result).toContain('<textarea>bar</textarea>')
+      done()
+    })
+  })
+
+  it('render v-model with textarea (non-optimized)', done => {
+    renderVmWithOptions({
+      render (h) {
+        return h('textarea', {
+          domProps: {
+            value: 'foo'
+          }
+        })
+      }
+    }, result => {
+      expect(result).toContain('<textarea data-server-rendered="true">foo</textarea>')
+      done()
+    })
+  })
 })
 
 function renderVmWithOptions (options, cb) {