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

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

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

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

Nuxt.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

638閲覧

二次元配列の個数を累計していきたい

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

Nuxt.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/09/19 15:07

編集2019/09/19 15:10

法律や規約は「章」「条」「項」で成立されているので、テーブルも3つで正規化できます。
条TBLは章IDを持っていて、項TBLは条IDを持つことができます。

<template src="./template.html"></template> <style scoped src="./style.css"></style> <script> export default { head() { return { title: '貸渡約款' } }, data() { return { rental_clause_chapters: [ { content: '総則', rental_clause_articles: [ { content: '約款の適用', rental_clause_terms: [ { content: '当社はこの約款の定めるところにより、貸渡自動車(以下「レンタカー」という)を借受人に貸渡すものとし、借受人はこれを借受けるものとします。なお、この約款に定めのない事項については、法令または一般の慣習によるものとします。', }, { content: '当社は、この約款の趣旨、法令、行政通達および一般の慣習に反しない範囲で特約に応ずることがあります。特約した場合には、その特約が約款に優先するものとします。', }, ], }, ], }, { content: '予約', rental_clause_articles: [ { content: '予約の申込', rental_clause_terms: [ { content: '借受人は、レンタカーを借受けるにあたって、この約款および当社所定の料金表等に同意のうえ、当社所定の方法により、あらかじめ車種クラス、借受開始日時、借受場所、借受期間、返還場所、運転者、チャイルドシート等の付属品の要否、その他の借受条件(以下「借受条件」という)を明示して予約の申込を行うことができます。', }, { content: '当社は、借受人から予約の申込があったときは、原則として、当社の保有するレンタカーの範囲内で予約に応ずるものとします。この場合、借受人は、当社が特に認める場合を除き、当社所定の予約申込金を支払うものとします。', }, ], }, // { // content: '予約の変更', // rental_clause_terms: [ // { // content: '借受人は、前条第1項の借受条件を変更しようとするときは、あらかじめ当社の承諾を受けなければならないものとします。', // }, // ], // }, // { // content: '予約の取消等', // rental_clause_terms: [ // { // content: '借受人は、当社の承諾を得て予約を取消すことができます。', // }, // { // content: '借受人が、借受人の都合により、予約した借受開始時刻を1時間以上経過してもレンタカー貸渡契約(以下「貸渡契約」という)が締結されなかったときは、予約が取消されたものとします。', // }, // { // content: '借受人の都合により予約が取消されたときは、借受人は、別に定めるところにより当社所定の予約取消手数料を当社に支払うものとし、当社は、この予約取消手数料の支払があったときは、受領済の予約申込金を借受人に返還するものとします。', // }, // { // content: '当社の都合により予約が取消されたときは、当社は、受領済の予約申込金を借受人に返還するほか、当社所定の違約金を支払うものとします。', // }, // { // content: '事故、盗難、不返還、リコール等の事由または天災その他の借受人もしくは当社のいずれの責にもよらない事由により貸渡契約が締結されなかったときは、予約は取消されたものとします。この場合、当社は受領済の予約申込金を借受人に返還するものとします。', // }, // ], // }, // { // content: '代替レンタカー', // rental_clause_terms: [ // { // content: '当社は、借受人から予約のあった車種クラスのレンタカーの貸渡しができないときは、借受人に対し、予約と異なる車種クラスのレンタカー(以下「代替レンタカー」という)の貸渡しを申し入れることができるものとします。', // }, // { // content: '借受人が前項の申入れを承諾したときは、当社は車種クラスを除き予約時と同一の借受条件で代替レンタカーを貸渡すものとします。この場合借受人は、代替レンタカーと予約のあった条件のレンタカーのうち、いずれか貸渡料金の低い方の料金を支払うものとします。', // }, // { // content: '借受人が第1項の代替レンタカーの貸渡しの申入れを拒絶した場合は、予約は取消されるものとします。この場合において、貸渡しすることができない原因が当社の責に帰すべき事由によるときは、第4条第4項に準じて取扱い、当社の責に帰さない事由によるときは、第4条第5項に準じて取扱うものとします。', // }, // ], // }, // { // content: '免責', // rental_clause_terms: [ // { // content: '当社および借受人は、予約が取消され、または貸渡契約が締結されなかったことについては、第4条および第5条に定める場合を除き、相互に何ら請求をしないものとします。', // }, // ], // }, // { // content: '予約業務の代行', // rental_clause_terms: [ // { // content: '借受人は、当社に代わって予約業務を取扱う予約センター、旅行代理店、提携会社等(以下「代行業者」という)において予約の申込をすることができます。', // }, // { // content: '代行業者に対して前項の申込を行ったときは、借受人はその代行業者に対して予約の変更または取消を申込むことができるものとします。', // }, // ], // }, ], }, { content: '貸渡', rental_clause_articles: [ { content: '貸渡契約の締結', rental_clause_terms: [ { content: '借受人は第2条第1項に定める借受条件を明示し、当社はこの約款、料金表等により貸渡条件を明示して、貸渡契約を締結するものとします。ただし貸渡すことができるレンタカーがない場合、または借受人もしくは運転者が第9条第1項または第2項各号のいずれかに該当する場合を除きます。', }, { content: '貸渡契約を締結した場合、借受人は当社に第11条第1項に定める貸渡料金を支払うものとします。', }, { content: '当社は、監督官庁のレンタカーに関する基本通達に基づき、貸渡簿(貸渡原票)および第14条第1項に規定する貸渡証に運転者の氏名、住所、運転免許の種類および運転免許証の番号を記載しまたは運転者の運転免許証の写しを添付する義務があるため、貸渡契約の締結にあたり、借受人に対し、借受人または借受人の指定する運転者(以下「運転者」という)の運転免許証の提示を求め、当社が必要と認めた場合はその写しの提出を求めます。この場合、借受人は、自己が運転者であるときは自己の運転免許証を提示し、当社が求めた場合はその写しを提出するものとし、借受人と運転者が異なるときは運転者の運転免許証を提示し、当社が求めた場合はその写しを提出するものとします。監督官庁の基本通達とは、国土交通省自動車交通局長通達「レンタカーに関する基本通達」(自旅第138号 平成7年6月13日)の2.(10)(11)をいいます。運転免許証とは、道路交通法第92条に規定される運転免許証のうち、道路交通法施行規則第19条別記様式第14の書式の運転免許証をいいます。また道路交通法第107条の2に規定する国際運転免許証または外国運転免許証は、運転免許証に準じます。', }, { content: '当社は、貸渡契約の締結にあたり、借受人および運転者に対し、運転免許証の他に本人の身元が確認ができる書類の提示を求め、および提出された書類の写しをとることがあります。', }, { content: '当社は、貸渡契約の締結にあたり、借受人または運転者に携帯電話番号等の告知を求めるものとします。', }, { content: '当社は、貸渡契約の締結にあたり、借受人に対し、クレジットカードあるいは現金による支払を求め、またはその他の支払方法を指定することがあります。', }, ], }, ], }, ] } } } </script> </script>
<v-container> <v-row v-for="(rental_clause_chapter, rental_clause_chapter_index) in rental_clause_chapters"> <v-col> <h2 class="headline">第{{ rental_clause_chapter_index + 1 }}章 {{ rental_clause_chapter.content }}</h2> <v-row class="pl-10" v-for="(rental_clause_article, rental_clause_article_index) in rental_clause_chapter.rental_clause_articles"> <v-col> <h3 class="title">第{{ rental_clause_chapter_index ? (rental_clause_article_index + 1) + rental_clause_chapters[rental_clause_chapter_index - 1].rental_clause_articles.length : rental_clause_article_index + 1}}条({{ rental_clause_article.content }})</h3> <v-row class="pl-10"> <v-col> <p class="text-justify font-weight-light" style="white-space: pre-line" v-for="(rental_clause_term, rental_clause_term_index) in rental_clause_article.rental_clause_terms">第{{ rental_clause_term_index + 1 }}項. {{ rental_clause_term.content }}</p> </v-col> </v-row> </v-col> </v-row> </v-col> </v-row> </v-container>

イメージ説明

第3章は第4条から始まって欲しいのですが、ロジックが甘かったのでそうなっていません。

例えば、1回目のループ以外は、以下のロジックをメソッド定義でかまそうと思ったりしましたが、なんだかそれだけのためにやりすぎてるような気もしてもっとスマートなやり方があったら教えていただきたいです。

getArticlesNUmber() { var count = 0 for(index in (現在のループindex + 1) - 1) { // indexは0から始まるようにしてるので。 count =+ 章[index - 1].条.length } return count }

return ~~~~ という感じで1行でできたら素敵ングです。

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

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

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

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

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

guest

回答1

0

最適解かは分かりませんが、下記のような形式ではどうでしょうか。
Array.prototype.flatはIEでは動作しないのでIEで動作させたい場合はlodashのflatten関数などを使用してください。

以下は回答用の記述を抜粋したものなので適宜補ってください。

vue

1<template> 2 <div v-for="(item, index) in rental_clause_chapters"> 3 {{ index + 1 }}章 {{ item.content }} 4 <div v-for="(content, index2) in item.rental_clause_articles"> 5  {{ getCount(index, index2) }}条 {{ content.content }} 6 </div> 7 </div> 8</template> 9 10<script> 11 export default { 12 methods: { 13 getCount(index, index2) { 14 return this.rental_clause_chapters.slice(0, index).map(el => el.rental_clause_articles).flat().length + index2 + 1 15 } 16 } 17 } 18</script>

投稿2019/09/20 02:32

nt4c

総合スコア768

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問