テーブル内の最初の行のスタイルを変更する

Question

テーブルの最初の行のスタイルを変更しようとしていますが、それは正しく適用されないということです。テーブルの最初の行にアクセスする特定のタグ。

基本的に、チェックボックスをオンにすると、行のヘッダーの色が青色に変わる必要があります。

ので、私はこれを行う：

<div class="col-md-3"> 
    <label class="checkbox-inline control-label col-md-10"><input v-model="hasHeader" type="checkbox">Header Row?</label> 
</div> 



<table class="table table-responsive"> 
    <tbody> 
     <tr v-for="(row,idx1) in tableRows" :class="{headerRowDefault: checkHeader}"> 
     <td class="table-success" v-for="(col,idx2) in tableCols"><input v-model="table.tableGrid[idx1][idx2]" type="text" class="borderTbl" value="HEY"></td> 
     </tr> 
    </tbody> 
    </table> 

私の計算されたcheckHeader方法：

checkHeader (idx2) { 
     alert('CHECKHEADER') 
     if (this.hasHeader === true && idx2 === 0) { 
     return true 
     } else { 
     return false 
     } 
    } 

は私が私のチェックボックスに最初の行への変更をトリガすることができる方法があるが、私は私を知っています最初の行にCSSスタイルを適用できますが、これをトリガーでどのように行うことができますか？どんな助け？

Answer 1

コードは次のようになります。

console.clear() 
 

 
new Vue({ 
 
    el: "#app", 
 
    data:{ 
 
    tableRows:[1,2,3,4,5], 
 
    tableCols: [1,2,3], 
 
    hasHeader: false 
 
    }, 
 
    methods:{ 
 
    checkHeader (rowIndex) { 
 
     if (this.hasHeader === true && rowIndex === 0) { 
 
     return true 
 
     } else { 
 
     return false 
 
     } 
 
    } 
 
    } 
 
})

.headerRowDefault{ 
 
    background-color: blue; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="app"> 
 
    <div class="col-md-3"> 
 
    <label class="checkbox-inline control-label col-md-10"><input v-model="hasHeader" type="checkbox">Header Row?</label> 
 
    </div> 
 

 

 

 
    <table class="table table-responsive"> 
 
    <tbody> 
 
     <tr v-for="(row,idx1) in tableRows" :class="{headerRowDefault: checkHeader(idx1)}"> 
 
     <td class="table-success" v-for="(col,idx2) in tableCols">{{idx2}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

明らか例では、偽のデータを使用しています。私は実際のtableRowsとtableColsが何であるべきか分かりません。