2017-02-24 13 views
1

Vue.jsでIntelliJ IDEAを使用しています。コンポーネントテンプレートの定義に関しては少し問題があります。簡単に言えば、IntelliJのは例IntelliJはVue.jsコンポーネントテンプレートで改行を許可していません

Vue.component('app-button', { 
    template: '<div class="button-container"><div class="button-outer"><div class="button-inner"></div></div></div>' 
}); 

し、それらを連結しようとせずに長い1行を超えることはできませんそして、私はスペースにそれを試してみるときに1個のHTMLタグが各行に..です

Vue.component('app-button', { 
    template: '<div class="button-container">' + 
    '<div class="button-outer">' + 
    '<div class="button-inner">' + 
    '</div>' + 
    '</div>' + 
    '</div>' 
}); 

これは、テンプレートを最小限に抑えるように定義することを困難にします。これらの文字列でIntelliJをうまく動作させる方法はありますか?そうでない場合は、別のファイルなどでそれらを定義できますか?このような

+1

間違いなく正しいJavaScriptの構文です。モジュール化して外部ファイルを作成することをお勧めします。 – Josh

+0

https://youtrack.jetbrains.com/issue/WEB-19082 – CrazyCoder

答えて

1

使用ES6テンプレート(http://es6-features.org/#StringInterpolation)、:

Vue.component('app-button', { 
    template: `<div class="button-container"><div class="button-outer"><div class="button-inner"></div></div></div>` 
}); 
+0

私はバックダニを使用する必要があることを知らなかった、私はそれらが単なるアポストロフィーだと思った!これはIntelliJでバックチックを使用して正常に動作します。私のHTMLは今読めるようになっています。ありがとうございました。 –

関連する問題