Q&A
・やりたい事
v-forで繰り返しによりクラスとdataのカスタム属性に動的に値を与えてjQueryで設定したタブ切り替えを正常に
動作させたい。
(方法)
タブとタブコンテンツに付与されているクラスを削除。追加により切り替える
・ダメなところ表示されるがタブをクリックされても切り替わらない。
ただコンテンツが最初に表示されるもの以外は非表示なのでclass,styleの値は正常に付与されている模様。
カスタム属性にうまく値を渡し切れていないという推測。
・v-forに渡しているリスト
[[要素１,[レコードリスト１],[レコードリスト２]] , [・・・]]
このリストの要素１の部分をカスタム属性に【:data-tab-info="item[0]"】という形で渡している。
※コードが多いので必要最低限
下記はvue.jsのテンプレート部分
html
1<div class="tab1 row" style="margin-top:50px;"> 2 <!-- Tab Button --> 3 <div class="col-12 tab__button_" > 4 <ul class="list1" v-for="item in sepa_prog_list" > 5 <li :class="['js-tab-trigger_2', 'item1' ,current_path(item[0])]" data-tab-list="['tabGroup1_2']" :data-tab-info="item[0]"> 6 <button class="button_1 " type="button">{{item[0]}}</button> 7 </li> 8 </ul> 9 </div> 10 <br> 11 <!-- Tab Content --> 12 <div class="col-12"> 13 <div v-for="item in sepa_prog_list"> 14 <div :class="['js-tab-content_2', 'content' ,current_path(item[0])]" :style="dis_no(item[0])" data-tab-list="tabGroup1_2" :data-tab-info="item[0]"> 15 <h2 class="title">{{item[0]}} 紹介ページ</h2> 16 <div class="box"> 17 <p class="text"> 18 ここでは参考書や勉強で使用した{{item[0]}}のプログラムなどの実例やつまずいたエラーなどを紹介していきます。 19 </p> 20 <div style="display:flex;"> 21 <div class="col-6 roll_display"> 22 <div class="card"> 23 <div class="card-title p-2"> 24 LATEST IT {{item[0]}} TECH POST 25 </div> 26 <div class="card-body"> 27 <table class="table table-hover"> 28 <tbody> 29 <tr v-for="(item1,key) in item[1]"> 30 <td class="clickable-row" v-on:click= "dis_detil_tech" data-id="item1.id"> 31 <ul> 32 <li style="font-weight:bold;">{{dis_level(item1.le_level)}}</li> 33 <li>{{item1.explain}}</li> 34 <li class="text-right">{{item1.created}}</li> 35 </ul> 36 </td> 37 </tr> 38 </tbody> 39 </table> 40 </div> 41 </div> 42 </div> 43 <div class="col-6 roll_display"> 44 <div class="card"> 45 <div class="card-title p-2"> 46 LATEST IT {{item[0]}} ERROR POST 47 </div> 48 <div class="card-body"> 49 <table class="table table-hover"> 50 <tbody> 51 <tr v-for="(item2,key) in item[2]"> 52 <td class="clickable-row" v-on:click= "dis_detil_error" data-id="item2.id"> 53 <ul> 54 <li style="font-weight:bold;">{{item2.err_na}}</li> 55 <li>{{item2.err_de}}</li> 56 <li class="text-right">{{item2.created}}</li> 57 </ul> 58 </td> 59 </tr> 60 </tbody> 61 </table> 62 </div> 63 </div> 64 </div> 65 </div> 66 </div> 67 </div> 68 </div> 69 </div>
下記がjQueryでタブを切り替える部分
（js-tab-trigger_2、js-tab-content_2、is-current_2）のクラスは付与されているのを確認しました。
javascript
1dis_no:function(word){ 2 let x = ""; 3 if(word != "HTML"){ 4 x = "display: none;" 5 }else{ 6 x = ""; 7 } 8 return x 9 }, 10current_path:function(num){ 11 let x = ""; 12 if(num == "HTML"){ 13 x = "is-current_2"; 14 } 15 return x 16 }, 17$(function() { 18 // ①Tabの切替トリガー 19 var $tabTrigger = $('.js-tab-trigger_2'); 20 21 // ②Tabのコンテンツ 22 var $tabContent = $('.js-tab-content_2'); 23 24 // ③トリガーのクリック 25 $tabTrigger.on('click', function(event) { 26 // ④Clickイベントを止める 27 //event.preventDefault(); 28 29 // ⑤クリックしたタブ要素とdata属性を取得 30 var $target = $(event.currentTarget); 31 var $list = $target.data('tab-list'); 32 var $info = $target.data('tab-info'); 33 this.list_info = (".clickable-row").data(id) 34 // ⑥選択中のトリガーを更新する 35 $tabTrigger 36 .filter('[data-tab-list="' + $list + '"]') //グループの全部の要素にある指定クラス削除。 37 .removeClass('is-current_2') 38 .filter('[data-tab-info="' + $info + '"]')//クリックしたタブに指定クラスを付加 39 .addClass('is-current_2'); 40 41 // ⑦選択中のコンテンツを更新する 42 $tabContent 43 .filter('[data-tab-list="' + $list + '"]') 44 .removeClass('is-current_2') 45 .hide() 46 .filter('[data-tab-info="' + $info + '"]') 47 .addClass('is-current_2') 48 .show(); 49 }); 50 });
わかる方がいれば教えていただけると嬉しいです。よろしくお願い致します。
あなたの回答
tips
プレビュー
