アクティブクラスを1回だけ繰り返すにはどうすればいいですか？

Question

私のv-forはうまく動作しますが、私のブートストラップが必要です。4 css .activeクラスもrepeat.iブートストラップしたい4アクティブクラスは1回だけ繰り返します。 どうすればこの問題を解決できますか教えてください。

var app = new Vue ({ 
 
\t \t el: '#app', 
 
\t \t data:{ 
 
\t \t \t subjects: ['CSE','EEE','BBA'] 
 
\t \t } 
 
\t })

body{ 
 
\t \t font-family: 'Trykker','Spectral SC', serif; 
 
\t } 
 
\t h1,h2,h3,h4,h5,h6{ 
 
\t \t font-family: 'Spectral SC', serif; 
 
\t } 
 
\t p{ 
 
\t \t font-family: 'Trykker', serif; 
 
\t }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div id="app"> 
 

 
\t \t \t 
 
\t \t \t <ul class="list-group"> 
 
\t \t \t  <li v-for="subject in subjects" class="list-group-item active">{{ subject }}</li> 
 
\t \t \t </ul> 
 

 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 

 

 
\t

Answer 1

あなただけのアクティブな選択された被写体を求めていますか？ vuejs公式サイトのclass and style bindingを確認できます。私はこの例を含めました。

var app = new Vue ({ 
 
\t \t el: '#app', 
 
\t \t data:{ 
 
\t \t \t activeSubject: 'CSE', 
 
\t \t \t subjects: ['CSE','EEE','BBA'] 
 
\t \t } 
 
\t })

body{ 
 
\t \t font-family: 'Trykker','Spectral SC', serif; 
 
\t } 
 
\t h1,h2,h3,h4,h5,h6{ 
 
\t \t font-family: 'Spectral SC', serif; 
 
\t } 
 
\t p{ 
 
\t \t font-family: 'Trykker', serif; 
 
\t }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div id="app"> 
 

 
\t \t \t 
 
\t \t \t <ul class="list-group"> 
 
\t \t \t  <li v-for="subject in subjects" class="list-group-item" :class="{active:subject==activeSubject}">{{ subject }}</li> 
 
\t \t \t </ul> 
 

 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 

 

 
\t