問題

我正在用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“列”: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