Vue: Vue.jsの口ひげは、ルート要素をインデントした後にのみ正しくレンダリングされません

作成日 2018年04月29日  ·  4コメント  ·  ソース: vuejs/vue

バージョン

2.5.16

複製リンク

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

再現する手順

この問題は、ルート要素がインデントされておらず、口ひげが複数の行に分割されている場合に発生します。

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

ルート要素がインデントされている場合にのみ、口ひげが正しくレンダリングされます。

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

また、口ひげが1行に配置され、ルート要素がインデントされていない場合にも機能します。

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

何が期待されますか?

口ひげはデータをバインドする必要があります

実際に何が起こっているのですか?

口ひげはプレーンテキストにレンダリングされます


コードを美しくしたかっただけなので、口ひげを数行に分割し、ルート要素のインデントを削除しました。

bug has PR

最も参考になるコメント

なぜ誰かがそのようにコードを書くのでしょうか?

全てのコメント4件

<template>root element間の単一のスペースで機能します:

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

それらの間にスペースがないわけではありません:

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

なぜ誰かがそのようにコードを書くのでしょうか?

@syntacticsolutionsこれは問題ではありません、実際はバグですよね?

@DanielSharkovに感謝します、それはバグであるはずです。

インデントによるさまざまな動作の根本的な原因は次のとおりです: https

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

たぶん\ rを追加する必要がありますか? テキスト補間正規表現のパターン:

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

このページは役に立ちましたか?
0 / 5 - 0 評価