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

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

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

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

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

受付中

Vue記述を簡略化したいです。

toritoritan
toritoritan

総合スコア0

Vue.js

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

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

0回答

0評価

0クリップ

182閲覧

投稿2022/03/26 08:03

現在、携帯会社の最適料金プランシミュレーションのようなアプリをvue.jsを使用し制作しております。
私自身、プログラミング初心者な部分もあり、なんとか料金プランシミュレーションのようなアプリは完成したのですが、for文や変数等を使用していないため、繰り返しの記述が多くスマートではございません。

そこで、似たような記述は"v-for"等を使用して簡略したいと試みておりますが、知識に乏しいため、皆様のお力添えを頂戴できましたら幸いでございます。

現在のアプリは以下firebaseにデプロイされております。
https://simulation-app-65c4f.web.app/

ご確認、何卒よろしくお願いいたします。

vue.js

<template> <v-card flat> <v-card-text> <v-container fluid> <v-row v-if="!isActive1 && !isActive2"> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" > <v-btn @click="select1">選択1</v-btn> <v-btn class="ml-10" @click="select2">選択2</v-btn> </v-col> </v-row> <v-row v-if="!isActive1_1 && !isActive1_2 && !isActive2_1 && !isActive2_2" > <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive1" > <v-btn @click="select1_1">選択1-1</v-btn> <v-btn class="ml-10" @click="select1_2">選択1-2</v-btn> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive2" > <v-btn @click="select2_1">選択2-1</v-btn> <v-btn class="ml-10" @click="select2_2">選択2-2</v-btn> </v-col> </v-row> <v-row v-if=" !isActive1_1_1 && !isActive1_1_2 && !isActive1_2_1 && !isActive1_2_2 && !isActive2_1_1 && !isActive2_1_2 && !isActive2_2_1 && !isActive2_2_2 " > <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive1_1" > <v-btn @click="select1_1_1">選択1-1-1</v-btn> <v-btn class="ml-10" @click="select1_1_2">選択1-1-2</v-btn> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive1_2" > <v-btn @click="select1_2_1">選択1-2-1</v-btn> <v-btn class="ml-10" @click="select1_2_2">選択1-2-2</v-btn> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive2_1" > <v-btn @click="select2_1_1">選択2-1-1</v-btn> <v-btn class="ml-10" @click="select2_1_2">選択2-1-2</v-btn> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive2_2" > <v-btn @click="select2_2_1">選択2-2-1</v-btn> <v-btn class="ml-10" @click="select2_2_2">選択2-2-2</v-btn> </v-col> </v-row> <v-row> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive1_1_1" > <v-card class="pa-6">あなたの最適なプランは選択1-1-1</v-card> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive1_1_2" > <v-card class="pa-6">あなたの最適なプランは選択1-1-2</v-card> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive1_2_1" > <v-card class="pa-6">あなたの最適なプランは選択1-2-1</v-card> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive1_2_2" > <v-card class="pa-6">あなたの最適なプランは選択1-2-2</v-card> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive2_1_1" > <v-card class="pa-6">あなたの最適なプランは選択2-1-1</v-card> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive2_1_2" > <v-card class="pa-6">あなたの最適なプランは選択2-1-2</v-card> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive2_2_1" > <v-card class="pa-6">あなたの最適なプランは選択2-2-1</v-card> </v-col> <v-col class="d-flex justify-center align-center mb-6" style="height: 50vh" v-if="isActive2_2_2" > <v-card class="pa-6">あなたの最適なプランは選択2-2-2</v-card> </v-col> </v-row> </v-container> </v-card-text> </v-card> </template> <script> export default { data() { return { isActive1: false, isActive2: false, isActive1_1: false, isActive1_2: false, isActive2_1: false, isActive2_2: false, isActive1_1_1: false, isActive1_1_2: false, isActive1_2_1: false, isActive1_2_2: false, isActive2_1_1: false, isActive2_1_2: false, isActive2_2_1: false, isActive2_2_2: false, }; }, methods: { select1() { this.isActive1 = !this.isActive1; }, select2() { this.isActive2 = !this.isActive2; }, select1_1() { this.isActive1_1 = !this.isActive1_1; }, select1_2() { this.isActive1_2 = !this.isActive1_2; }, select2_1() { this.isActive2_1 = !this.isActive2_1; }, select2_2() { this.isActive2_2 = !this.isActive2_2; }, select1_1_1() { this.isActive1_1_1 = !this.isActive1_1_1; }, select1_1_2() { this.isActive1_1_2 = !this.isActive1_1_2; }, select1_2_1() { this.isActive1_2_1 = !this.isActive1_2_1; }, select1_2_2() { this.isActive1_2_2 = !this.isActive1_2_2; }, select2_1_1() { this.isActive2_1_1 = !this.isActive2_1_1; }, select2_1_2() { this.isActive2_1_2 = !this.isActive2_1_2; }, select2_2_1() { this.isActive2_2_1 = !this.isActive2_2_1; }, select2_2_2() { this.isActive2_2_2 = !this.isActive2_2_2; }, }, }; </script>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

shiracamus

2022/03/26 14:54

f-vorで回すためには、質問をオブジェクト化し、isActiveをリスト化し、メソッドは一つにして引数で選択項目を渡すといいですよ。
toritoritan

2022/03/29 07:39

shiracamus様 ご回答いただき、誠にありがとうございます。 いただいたアドバイスを元に、チャレンジしてみます。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

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