diff --git a/src/server/render.js b/src/server/render.js index 7720c0172b4..e28fb63cebc 100644 --- a/src/server/render.js +++ b/src/server/render.js @@ -144,6 +144,22 @@ function hasAncestorData (node: VNode) { return parentNode && (parentNode.data || hasAncestorData(parentNode)) } +function getVShowDirectiveInfo (node: VNode): ?VNodeDirective { + let dir: VNodeDirective + let tmp + + while (node) { + if (node.data && node.data.directives) { + tmp = node.data.directives.find(dir => dir.name === 'show') + if (tmp) { + dir = tmp + } + } + node = node.parent + } + return dir +} + function renderStartingTag (node: VNode, context) { let markup = `<${node.tag}` const { directives, modules } = context @@ -158,14 +174,22 @@ function renderStartingTag (node: VNode, context) { const dirs = node.data.directives if (dirs) { for (let i = 0; i < dirs.length; i++) { - const dirRenderer = directives[dirs[i].name] - if (dirRenderer) { + const name = dirs[i].name + const dirRenderer = directives[name] + if (dirRenderer && name !== 'show') { // directives mutate the node's data // which then gets rendered by modules dirRenderer(node, dirs[i]) } } } + + // v-show directive needs to be merged from parent to child + const vshowDirectiveInfo = getVShowDirectiveInfo(node) + if (vshowDirectiveInfo) { + directives.show(node, vshowDirectiveInfo) + } + // apply other modules for (let i = 0; i < modules.length; i++) { const res = modules[i](node) diff --git a/test/ssr/ssr-string.spec.js b/test/ssr/ssr-string.spec.js index 5dd3747c9e6..efe885456dd 100644 --- a/test/ssr/ssr-string.spec.js +++ b/test/ssr/ssr-string.spec.js @@ -240,6 +240,75 @@ describe('SSR: renderToString', () => { }) }) + it('v-show directive render', done => { + renderVmWithOptions({ + template: '
inner
' + }, res => { + expect(res).toContain( + '
inner
' + ) + done() + }) + }) + + it('v-show directive not passed to child', done => { + renderVmWithOptions({ + template: '', + components: { + foo: { + template: '
inner
' + } + } + }, res => { + expect(res).toContain( + '
inner
' + ) + done() + }) + }) + + it('v-show directive not passed to slot', done => { + renderVmWithOptions({ + template: 'inner', + components: { + foo: { + template: '
' + } + } + }, res => { + expect(res).toContain( + '
inner
' + ) + done() + }) + }) + + it('v-show directive merging on components', done => { + renderVmWithOptions({ + template: '', + components: { + foo: { + render: h => h('bar', { + directives: [{ + name: 'show', + value: true + }] + }), + components: { + bar: { + render: h => h('div', 'inner') + } + } + } + } + }, res => { + expect(res).toContain( + '
inner
' + ) + done() + }) + }) + it('text interpolation', done => { renderVmWithOptions({ template: '
{{ foo }} side {{ bar }}
',