現在、携帯会社の最適料金プランシミュレーションのようなアプリを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>
まだ回答がついていません
会員登録して回答してみよう