问题

我正在用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