Vue: Vue.js mustach no se representa correctamente solo después de sangrar el elemento raíz

Creado en 29 abr. 2018  ·  4Comentarios  ·  Fuente: vuejs/vue

Versión

2.5.16

Enlace de reproducción

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

pasos para reproducir

Este problema ocurre cuando el elemento raíz no tiene sangría y el bigote está dividido en varias líneas.

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

Solo cuando el elemento raíz está sangrado, el bigote se representa correctamente.

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

Lo que también funciona es cuando el bigote se coloca en una sola línea y el elemento raíz no tiene sangría.

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

¿Lo que es esperado?

El bigote debe unir datos

¿Qué está pasando realmente?

El bigote se renderiza como texto sin formato


Solo quería embellecer mi código, así que dividí el bigote en varias líneas y eliminé la sangría del elemento raíz.

bug has PR

Comentario más útil

¿Por qué alguien escribiría su código de esa manera?

Todos 4 comentarios

funciona con un solo espacio entre <template> y root element :

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

no sin espacio entre ellos:

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

¿Por qué alguien escribiría su código de esa manera?

@syntacticsolutions Esto no importa, de hecho es un error, ¿verdad?

Gracias @DanielSharkov , debería ser un error.

La causa raíz del comportamiento diferente con sangría es la siguiente: 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

¿Quizás deberíamos agregar \ r? patrón en la expresión regular de interpolación de texto:

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

¿Fue útil esta página
0 / 5 - 0 calificaciones