問題

私はvueで映画シートプランデザインを作成しています。私は座席のレイアウトを作るのに苦労しています。

私はvueコンポーネントにこれを持っています:

 <div class="row" v-for="(item,index) in seatRows" :key="index">
     <div v-for="(rows,i) in item" :key="i" :id="rows.Row">
          <input type="checkbox">
      </div>                         
</div> 
 

私のjsonはこのように見えます

       "Seats":[
         {
            "ID":1,
            "Name":"A08",
            "Status":"0",
            "Row":1,
            "Col":1
         },
         {
            "ID":2,
            "Name":"A07",
            "Status":"0",
            "Row":1,
            "Col":2
         },
         {
            "ID":3,
            "Name":"A06",
            "Status":"0",
            "Row":1,
            "Col":4
         },
         {
            "ID":4,
            "Name":"A05",
            "Status":"0",
            "Row":1,
            "Col":5
         },
         {
            "ID":5,
            "Name":"A04",
            "Status":"0",
            "Row":1,
            "Col":6
         },
         {
            "ID":6,
            "Name":"A03",
            "Status":"0",
            "Row":1,
            "Col":7
         }

      ],
   }
}
 

私のコードでは、必要なチェックボックスを表示することができますが、 "Row":1 "Column":3の空白または無効なチェックボックスが必要です。

これはどうすればいいですか?

  ベストアンサー

チェックボックス内から関数を呼び出し、レンダリング時に計算する引数を渡す

   <input type="checkbox" v-bind:disabled="isToDisable(key, id)">
 

メソッドを作成する

   isToDisable(key, id){
    console.log(key)
    var isDisabled = true; // check if row and col is in object
    return isDisabled;
  }
 

  同じタグがついた質問を見る

javascriptvue.js