Vue: Vue.js mustach not correctly rendered only after indenting root element

Created on 29 Apr 2018  ·  4Comments  ·  Source: vuejs/vue

Version

2.5.16

Reproduction link

https://codesandbox.io/s/6jnlpno3lw

Steps to reproduce

This issue happens, when the root element is not indented and the mustache is split into several lines.

<template>
<div>
    <p>{{
        myVar
    }}</p>
</div>
</template>

Only when the root element is indented, the mustache gets rendered correctly.

<template>
    <div>
        <p>{{
            myVar
        }}</p>
    </div>
</template>

What also works, is when mustache is put into a single line and the root element is not indented.

<template>
<div>
    <p>{{ myVar }}</p>
</div>
</template>

What is expected?

The mustache should bind data

What is actually happening?

The mustache gets rendered plain text


Only wanted to prettify my code, so I split the mustache into several lines and removed the indent of the root element.

bug has PR

Most helpful comment

Why would anyone write their code that way?

All 4 comments

does work with a single space between <template> and root element:

<template> <p>{{
  myVar
}}</p></template>

does not with no space between them:

<template><p>{{ 
  myVar
}}</p></template>

Why would anyone write their code that way?

@syntacticsolutions This doesn't matter, fact is it's a bug, right?

Thanks @DanielSharkov , it should be a bug.

The root cause of different behavior with indent is bellow: https://github.com/yyx990803/de-indent/blob/master/index.js#L17-L24

    if (c === ' ' || c === '\t') {
      type = c
      cur = count(line, type)
      if (cur < min) {
        min = cur
      }
    } else {
      return str

Maybe we should add \r? pattern in the text interpolation regexp:

https://github.com/vuejs/vue/blob/5e3823a5766da1df60481e1e7a20f36d08e716ce/src/compiler/parser/text-parser.js#L6-L13

Was this page helpful?
0 / 5 - 0 ratings