前提・実現したいこと
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> ☆</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は1つしかもてないのにv-forを使って1つのidを使いまわしていることが原因なことに気づきました。なのでv-forで回すごとに別個のidを作ればいいわけですが上手くいきません。
回答1件
あなたの回答
tips
プレビュー