javascript - 如何根据我的回复的行和列显示和禁用复选框?
问题描述
我正在用 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;
}