htmlのcheckboxとlabelを用いて詳細ボタンを作ったが、一番上のボタンしか反応しない。

前提・実現したいこと

htmlのcheckboxとlabelを用いて詳細ボタンを作り、それを押したら情報が出るようにしたいです。

発生している問題・エラーメッセージ

どこの詳細ボタンを押しても一番最初の情報が出てしまいます。labelを使わなかったり、チェックボックスが見える状態にして入力すると正しく動作するのでlabelの使い方が悪いのだと考えています。もしくはvue.jsを用いているのでlabelとvue.jsで不具合が起きているのかもしれません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>課題</title>
7    <link rel="stylesheet" href="css/styles.css">
8</head>
9
10<body>
11    <div id="app">
12        <h1>githubのIDを入力して下さい。レポジトリの詳細を表示します。</h1>
13        <forom class="search-form">
14            <input type="text" v-model="user" placeholder="id" class="search-id">
15            <input type="submit" value="検索" @click="getAPI(), isVisible=true" class="search-id-button">
16        </forom>
17        <template v-if="isVisible">
18            <div v-for="(repo, index) in github.repos" :key="index">
19                <h2 v-text="repo.name"></h2>
20                <label for="switch">詳細</label>
21                <input type="checkbox" id="switch" class="switch-display">
22                <div class="accshow">
23                    <span>
24                        <span v-text="repo.stargazers_count"></span> &star;</span>
25                    <p v-if="repo.language!=null" v-text="repo.language" class="language"></p>
26                    <!--                    <span v-text="repo."></span>-->
27                    <p v-text="'詳細: ' + repo.description"></p>
28                    <p v-text="'URL: ' + repo.url"></p>
29
30                </div>
31
32            </div>
33        </template>
34
35    </div>
36
37    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
38    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
39    <script src="js/main.js"></script>
40</body>
41
42</html>

JS
1var vm = new Vue({
2    el: '#app',
3    data: {
4        github: {
5            repos: []
6        },
7        user: null,
8        isVisible: false
9    },
10    methods: {
11        getAPI: function () {
12            let user = this.user;
13            $.get('https://api.github.com/users/' + user + '/repos').then((repos) => {
14                vm.github.repos = repos;
15                this.addDetailBotton();
16                console.log(repos);
17            });
18        }
19       
20    }
21});

css
1#app h1 {
2    font-size: 20px;
3    padding: 30px;
4    text-align: center;
5}
6
7.search-id{
8    display: block;
9    margin: auto;
10    font-size: 20px;
11    width: 50%;
12    padding: 2px 4px;
13    outline: 0;
14    border: 0px;
15    border-bottom: 3px solid black;
16    background: transparent;
17}
18
19.search-id-button {
20    display: block;
21    margin: 10px auto;
22    padding: 5px 30px;
23}
24
25h2 {
26    display: inline-block;
27    border-bottom: 3px solid grey;
28}
29
30/* input[type=checkbox] {
31    display: none;
32} */
33.switch-display {
34    display: none;
35}
36
37label {
38    display: inline-block;
39    margin: 10px;
40    width: 70px;
41    height: 30px;
42    text-align: center;
43    border: 2px solid black;
44    border-radius: 5px;
45}
46
47 .accshow {
48    height: 0;
49    padding: 0;
50    overflow: hidden;
51    opacity: 0;
52    transition: 0.8s;
53}
54
55/*クリックで中身表示*/
56.switch-display:checked + .accshow {
57    height: auto;
58    padding: 5px;
59    background: #eaeaea;
60    opacity: 1;
61}
62
63.language{
64    display: inline-block;
65    width: auto;
66    margin: auto 20px;
67    border: 2px solid green;
68    border-radius: 20px;
69    /* background-color: aquamarine; */
70}

試したこと

上にも書きましたがラベルを使わなければ上手く動作します。しかしチェックボックスで詳細表示するのはダサいのでどうにかしたいです。

###追記
htmlのidは１つしかもてないのにv-forを使って1つのidを使いまわしていることが原因なことに気づきました。なのでv-forで回すごとに別個のidを作ればいいわけですが上手くいきません。

yambejp

2018/07/23 10:18

とりあえずforom→form から。

hidayoshi

2018/07/23 10:24

ありがとうございます。

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

回答1件

ベストアンサー

v-forの中で記述されている labelタグのfor属性の値と、inputタグのid属性の値がすべてswitchになっているからです。
そこの部分を以下に変えてみてください。

<label v-bind:for="'switch' + index">詳細</label>
<input type="checkbox" v-bind:id="'switch' + index" class="switch-display">

動くサンプルです

属性バインディングとループ処理は基本なので公式サイトで確認されることをおすすめします。
属性バインディング
 ループ処理

投稿2018/07/23 11:42

編集2018/07/23 11:48

keisukeh

総合スコア657

hidayoshi

2018/07/23 22:58

自分もidが全て同じになっているという部分は後で気づけたのですが、labelにv-bindをしていなかったせいで回答者さんと似たようなコードを書いて動作していませんでした。いまいちv-bindのしくみがわかっていなかったのですが、今回の経験から少しわかった気がします。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.49%

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

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

質問する

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

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