Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<template> tag which inside v-pre directive, will be ignore if v-pre doesn't use at staticRoot #10717

Open
cutPicturesMan opened this issue Oct 16, 2019 · 3 comments

Comments

@cutPicturesMan
Copy link

Version

2.6.10

Reproduction link

https://jsfiddle.net/vuetest/c5uw870y/3/

Steps to reproduce

1、click jsfiddle link
2、you will see result is {{msg}},is incorrect

What is expected?

render template tag as html element, dom looks like that:

<div>
  <p>
    <template>
      #document-fragment
      <span>{{msg}}</span>
    </template>
  </p>
</div>

What is actually happening?

template tag disappeared

<div>
  <p>
    <span>{{msg}}</span>
  </p>
</div>

when v-pre used at the staticRoot, template render correctly, fixed by #8146. see this also: https://jsfiddle.net/vuetest/c5uw870y/5/

when v-pre does not used at the staticRoot, template tag will be skip, source code in vue/src/compiler/codegen/index.js is:

export function genElement (el: ASTElement, state: CodegenState): string {
  // ...
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    // template tag run into here, directively render it's children instead of him
    return genChildren(el, state) || 'void 0'
  } // ...

how to slove this problem:

export function genElement (el: ASTElement, state: CodegenState): string {
  if (el.parent) {
    el.pre = el.pre || el.parent.pre; 
    // add this line
    state.pre = el.pre;
  }

I'm not familiar with creating pr with test, someone else can help me?

@posva
Copy link
Member

posva commented Oct 16, 2019

it seems that it was fixed in 2.5.18-beta-0 but regressed right after in 2.5.18

@michael-hawker
Copy link

FYI @nmetulev and @vogtn

@posva
Copy link
Member

posva commented Apr 7, 2020

Found a workaround thanks to #11292. making a part of the template dynamic makes it work:

<div>
  	<p v-pre>
    	<template><span>{{msg}}</span></template>
		</p>
    {{ '' }}
	</div>

the {{ '' }} outputs nothing but workarounds the problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants