vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
208k stars 33.69k forks source link

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

Open cutPicturesMan opened 5 years ago

cutPicturesMan commented 5 years ago

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 commented 5 years ago

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

michael-hawker commented 5 years ago

FYI @nmetulev and @vogtn

posva commented 4 years ago

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