質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

0回答

1420閲覧

pugでvue.jsを書くとき属性内()に改行をするとエラーがでます

ttkun

総合スコア30

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2020/01/15 22:37

Nuxt.jsでtemplateにpugを使用しています。
htmlで下記のように書いたコードをpugに変換すると下記のようになりますが
()内の属性の部分が長い場合改行をしたいと思いいろいろ試してみますが
改行するとエラーがでてしまします。

一応書き方は覚えいるのですが下記のような変換ツールを使っています。
https://html-to-pug.com/

html

1 2 <div> 3 <LightGallery 4 :images="images" 5 :index="index" 6 :disable-scroll="true" 7 @close="index = null" 8 /> 9 <ul> 10 <li 11 v-for="(thumb, thumbIndex) in [ 12 'path/to/thumb_1.jpeg', 13 'path/to/thumb_2.jpeg', 14 ]" 15 :key="thumbIndex" 16 @click="index = thumbIndex" 17 > 18 <img :src="thumb"> 19 </li> 20 </ul> 21 </div> 22
div lightgallery(:images='images' :index='index' :disable-scroll='true' @close='index = null') ul li(v-for="(thumb, thumbIndex) in [\ 'gallery/bird-01.jpg',\ 'gallery/bird-02.jpg',\ ]" :key='thumbIndex' @click='index = thumbIndex') img(:src='thumb')

\ , 半角などいれ試してみましたがイマイチわからず
とりあえず改行しないことで対処していますがなにか良い書き方はないでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問