javascript - 如何根据响应的行和列显示和禁用复选框？

Question

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

      ],
   }
}

使用我的代码，我可以显示必要的复选框，但我需要在“行”:1 “列”: 3 中有一个空格或禁用的复选框，这是响应中缺少的。

我该怎么做？

Answer 1

尝试从复选框中调用一个函数，并在渲染时传递参数以进行计算

  <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;
  }