Vue.js data()を配列で定義する時のpush()の使い方について

前提・実現したいこと

点数計算アプリを制作しました。
アプリ自体は意図通りに動作しています。

ただし、コードが長くてスッキリしていないと思っています。
データを配列で定義する箇所が、特に気になります。
（Vueインスタンスのdata()内の配列rowsの箇所）
もっとスッキリしたコードで書ける方法を教えていただきたいです。

上記の箇所以外でも、改善出来る箇所があれば教えていただきたいです。

※該当するソースコードにはCSSが適用されていないので、表示が崩れています。

該当のソースコード

HTML
1<!-- HTML -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6
7    <!-- Vue.js(開発用) -->
8    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
9</head>
10<body>
11    <table class="table table-bordered table-striped">
12        <thead class="thead-light">
13            <tr>
14                <th class="col-sm"></th>
15                <th class="col-lg">ゲート１</th>
16                <th class="col-lg">ゲート２</th>
17                <th class="col-lg">ゲート３</th>
18                <th class="col-lg">ゲート４</th>
19                <th class="col-lg">ゴール</th>
20                <th class="col-md">総打数</th>
21                <th class="col-md">加算点</th>
22                <th class="col-md">Total</th>
23            </tr>
24        </thead>
25        <tbody class="row-item">
26            <tr
27                v-for="(row, index) in rows"
28                :key="index"                
29            >
30                <th class="col-sm">{{ row.name }}</th>
31                <td>
32                    <counter-hit v-model="row.countGate1"></counter-hit>
33                    <hoop-in v-model="row.inGate1"></hoop-in>
34                </td>
35                <td>
36                    <counter-hit v-model="row.countGate2"></counter-hit>
37                    <hoop-in v-model="row.inGate2"></hoop-in>
38                </td>
39                <td>
40                    <counter-hit v-model="row.countGate3"></counter-hit>
41                    <hoop-in v-model="row.inGate3"></hoop-in>
42                </td>
43                <td>
44                    <counter-hit v-model="row.countGate4"></counter-hit>
45                    <hoop-in v-model="row.inGate4"></hoop-in>
46                </td>
47                <td>
48                    <counter-hit v-model="row.countGoal"></counter-hit>
49                    <hoop-in v-model="row.inGoal">ネットイン</hoop-in>
50                </td>
51                <td>
52                    <div class="sum">{{ sum(index) }}</div>
53                </td>
54                <td>
55                    <div class="addition">{{ addition(index) }}</div>
56                </td>
57                <td>
58                    <div class="total">{{ sum(index) + addition(index) }}</div>
59                </td>
60            </tr>
61        </tbody>
62    </table>
63
64    <!-- Test.js -->
65    <script src="test.js"></script>
66</body>
67</html>
68

JavaScript
1// JavaScript
2const counterHit = {
3    props: ['value'],
4  methods: {
5        countUp() {
6            this.$emit('input', this.value + 1);
7        },
8        countDown() {
9            if ( this.value > 0 ) {
10                this.$emit('input', this.value - 1);
11            }
12        },
13    },
14    template: `
15        <form>
16            打数
17            <div class="form-group input-group">
18                <div class="input-group-prepend">
19                    <button type="button" @click="countUp" class="btn btn-primary btn-up">+</button>
20                </div>
21                <input type="number" v-model="value" min="0" disabled class="form-control">
22                <div class="input-group-append">
23                    <button type="button" @click="countDown" class="btn btn-secondary btn-down">-</button>
24                </div>
25            </div>
26        </form>
27    `,
28};
29
30const hoopIn = {
31    props: ['value'],
32    methods: {
33        add() {
34            if(this.value === "") {
35                this.$emit('input', "○");
36            }
37        },
38        remove() {
39            if(this.value === "○") {
40                this.$emit('input', "");
41            }
42        },
43    },
44    template: `
45        <form>
46            <slot>フープイン</slot>
47            <div class="form-group input-group">
48                <div class="input-group-prepend">
49                    <button type="button" @click="add" class="btn btn-info btn-add">○</button>
50                </div>
51                <input type="text" v-model="value" disabled class="form-control">
52                <div class="input-group-append">
53                    <button type="button" @click="remove" class="btn btn-secondary btn-remove">☓</button>
54                </div>
55            </div>
56        </form>
57    `,
58};
59
60new Vue({
61    el: '.row-item',
62    data() {
63        return {
64            rows: [
65                {
66                    name: 'A',
67                    countGate1: 0,
68                    countGate2: 0,
69                    countGate3: 0,
70                    countGate4: 0,
71                    countGoal: 0,
72                    inGate1: "",
73                    inGate2: "",
74                    inGate3: "",
75                    inGate4: "",
76                    inGoal: "",
77                },
78                {
79                    name: 'B',
80                    countGate1: 0,
81                    countGate2: 0,
82                    countGate3: 0,
83                    countGate4: 0,
84                    countGoal: 0,
85                    inGate1: "",
86                    inGate2: "",
87                    inGate3: "",
88                    inGate4: "",
89                    inGoal: "",
90                },
91                {
92                    name: 'C',
93                    countGate1: 0,
94                    countGate2: 0,
95                    countGate3: 0,
96                    countGate4: 0,
97                    countGoal: 0,
98                    inGate1: "",
99                    inGate2: "",
100                    inGate3: "",
101                    inGate4: "",
102                    inGoal: "",
103                },
104                {
105                    name: 'D',
106                    countGate1: 0,
107                    countGate2: 0,
108                    countGate3: 0,
109                    countGate4: 0,
110                    countGoal: 0,
111                    inGate1: "",
112                    inGate2: "",
113                    inGate3: "",
114                    inGate4: "",
115                    inGoal: "",
116                },
117                {
118                    name: 'E',
119                    countGate1: 0,
120                    countGate2: 0,
121                    countGate3: 0,
122                    countGate4: 0,
123                    countGoal: 0,
124                    inGate1: "",
125                    inGate2: "",
126                    inGate3: "",
127                    inGate4: "",
128                    inGoal: "",
129                },
130                {
131                    name: 'F',
132                    countGate1: 0,
133                    countGate2: 0,
134                    countGate3: 0,
135                    countGate4: 0,
136                    countGoal: 0,
137                    inGate1: "",
138                    inGate2: "",
139                    inGate3: "",
140                    inGate4: "",
141                    inGoal: "",
142                },
143            ],
144        };
145    },
146    methods: {
147        sum(index) {
148            return (
149                this.rows[index].countGate1 +
150                this.rows[index].countGate2 +
151                this.rows[index].countGate3 +
152                this.rows[index].countGate4 +
153                this.rows[index].countGoal
154            );
155        },
156        addition(index) {
157            let additionGate1 = 0;
158            let additionGate2 = 0;
159            let additionGate3 = 0;
160            let additionGate4 = 0;
161            let additionGoal = 0;
162
163            if(this.rows[index].countGate1 === 1 && this.rows[index].inGate1 === "○") {
164                additionGate1 = -3;
165            } else if(this.rows[index].countGate1 === 1) {
166                additionGate1 = -2;
167            } else if(this.rows[index].inGate1 === "○" && this.rows[index].countGate1 !== 0) {
168                additionGate1 = -1;
169            }
170
171            if(this.rows[index].countGate2 === 1 && this.rows[index].inGate2 === "○") {
172                additionGate2 = -3;
173            } else if(this.rows[index].countGate2 === 1) {
174                additionGate2 = -2;
175            } else if(this.rows[index].inGate2 === "○" && this.rows[index].countGate2 !== 0) {
176                additionGate2 = -1;
177            }
178
179            if(this.rows[index].countGate3 === 1 && this.rows[index].inGate3 === "○") {
180                additionGate3 = -3;
181            } else if(this.rows[index].countGate3 === 1) {
182                additionGate3 = -2;
183            } else if(this.rows[index].inGate3 === "○" && this.rows[index].countGate3 !== 0) {
184                additionGate3 = -1;
185            }
186
187            if(this.rows[index].countGate4 === 1 && this.rows[index].inGate4 === "○") {
188                additionGate4 = -3;
189            } else if(this.rows[index].countGate4 === 1) {
190                additionGate4 = -2;
191            } else if(this.rows[index].inGate4 === "○" && this.rows[index].countGate4 !== 0) {
192                additionGate4 = -1;
193            }
194
195            if(this.rows[index].countGoal === 1 && this.rows[index].inGoal === "○") {
196                additionGoal = -4;
197            } else if(this.rows[index].countGoal === 1) {
198                additionGoal = -2;
199            } else if(this.rows[index].inGoal === "○" && this.rows[index].countGoal !== 0) {
200                additionGoal = -2;
201            }
202
203            return (
204                additionGate1 + 
205                additionGate2 +
206                additionGate3 + 
207                additionGate4 +
208                additionGoal
209            );
210        },
211    },
212    components: {
213        'counter-hit': counterHit,
214        'hoop-in': hoopIn,
215    },
216});

試したこと

push()を使って、配列を足していく方法があるそうですが、具体的にどのように書けば良いのか分かりませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

dataのpushに関しては、下記のようなやり方でいかがでしょうか？

created () {
    const names = ['A', 'B', 'C', 'D', 'E', 'F']
    for (const name of names) {
        this.rows.push({
            name: name,
            countGate1: 0,
            countGate2: 0,
            countGate3: 0,
            countGate4: 0,
            countGoal: 0,
            inGate1: '',
            inGate2: '',
            inGate3: '',
            inGate4: '',
            inGoal: '',
        })
    }
}

また、additionメソッドの変数宣言時に、下記のような書き方もあります。

let [
    additionGate1,
    additionGate2,
    additionGate3,
    additionGate4,
    additionGoal
] = [0, 0, 0, 0, 0]

この書き方に関しては、処理自体には、特に影響はないので好みの問題になります。

ここまで、書いたことに関しては、vueの知識というよりは、javascriptの知識なのでそのへんも学習することをおすすめします。
ドキュメントやオライリーなどを読んでみるといいかもしれません。

投稿2020/10/13 14:21

stakizawa

総合スコア117

chan-kama

2020/10/15 22:59

回答ありがとうございます。同じ動作をするコードでも、ここまで書き方が変わるんですね。これなら、スッキリとメンテもしやすそう。 JavaScriptの勉強も、もう一度やってみます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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