質問編集履歴

1 加筆

hidayoshi

hidayoshi score 10

2018/07/23 19:27  投稿

htmlのcheckboxとlabelを用いて詳細ボタンを作ったが、一番上のボタンしか反応しない。
### 前提・実現したいこと
htmlのcheckboxとlabelを用いて詳細ボタンを作り、それを押したら情報が出るようにしたいです。
### 発生している問題・エラーメッセージ
どこの詳細ボタンを押しても一番最初の情報が出てしまいます。labelを使わなかったり、チェックボックスが見える状態にして入力すると正しく動作するのでlabelの使い方が悪いのだと考えています。もしくはvue.jsを用いているのでlabelとvue.jsで不具合が起きているのかもしれません。
### 該当のソースコード
```html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>課題</title>
   <link rel="stylesheet" href="css/styles.css">
</head>
<body>
   <div id="app">
       <h1>githubのIDを入力して下さい。レポジトリの詳細を表示します。</h1>
       <forom class="search-form">
           <input type="text" v-model="user" placeholder="id" class="search-id">
           <input type="submit" value="検索" @click="getAPI(), isVisible=true" class="search-id-button">
       </forom>
       <template v-if="isVisible">
           <div v-for="(repo, index) in github.repos" :key="index">
               <h2 v-text="repo.name"></h2>
               <label for="switch">詳細</label>
               <input type="checkbox" id="switch" class="switch-display">
               <div class="accshow">
                   <span>
                       <span v-text="repo.stargazers_count"></span> &star;</span>
                   <p v-if="repo.language!=null" v-text="repo.language" class="language"></p>
                   <!--                   <span v-text="repo."></span>-->
                   <p v-text="'詳細: ' + repo.description"></p>
                   <p v-text="'URL: ' + repo.url"></p>
               </div>
           </div>
       </template>
   </div>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   <script src="js/main.js"></script>
</body>
</html>
```
```JS
var vm = new Vue({
   el: '#app',
   data: {
       github: {
           repos: []
       },
       user: null,
       isVisible: false
   },
   methods: {
       getAPI: function () {
           let user = this.user;
           $.get('https://api.github.com/users/' + user + '/repos').then((repos) => {
               vm.github.repos = repos;
               this.addDetailBotton();
               console.log(repos);
           });
       }
     
   }
});
```
```css
#app h1 {
   font-size: 20px;
   padding: 30px;
   text-align: center;
}
.search-id{
   display: block;
   margin: auto;
   font-size: 20px;
   width: 50%;
   padding: 2px 4px;
   outline: 0;
   border: 0px;
   border-bottom: 3px solid black;
   background: transparent;
}
.search-id-button {
   display: block;
   margin: 10px auto;
   padding: 5px 30px;
}
h2 {
   display: inline-block;
   border-bottom: 3px solid grey;
}
/* input[type=checkbox] {
   display: none;
} */
.switch-display {
   display: none;
}
label {
   display: inline-block;
   margin: 10px;
   width: 70px;
   height: 30px;
   text-align: center;
   border: 2px solid black;
   border-radius: 5px;
}
.accshow {
   height: 0;
   padding: 0;
   overflow: hidden;
   opacity: 0;
   transition: 0.8s;
}
/*クリックで中身表示*/
.switch-display:checked + .accshow {
   height: auto;
   padding: 5px;
   background: #eaeaea;
   opacity: 1;
}
.language{
   display: inline-block;
   width: auto;
   margin: auto 20px;
   border: 2px solid green;
   border-radius: 20px;
   /* background-color: aquamarine; */
}
```
### 試したこと
上にも書きましたがラベルを使わなければ上手く動作します。しかしチェックボックスで詳細表示するのはダサいのでどうにかしたいです。
上にも書きましたがラベルを使わなければ上手く動作します。しかしチェックボックスで詳細表示するのはダサいのでどうにかしたいです。
###追記
htmlのidは1つしかもてないのにv-forを使って1つのidを使いまわしていることが原因なことに気づきました。なのでv-forで回すごとに別個のidを作ればいいわけですが上手くいきません。
  • JavaScript

    23264 questions

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

  • CSS

    8942 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5951 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Vue.js

    1746 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る