상황
Vue에서 리스트 안에 체크박스들을 넣었는데, 전체선택하는 함수를 만들고 싶었다.
해결방법
모든 리스트를 돌면서 현재 체크 상황과 똑같이 해주면 된다. 의외로 간단함
코드
HTML 코드
<tbody>
<tr
v-for="(row, index) in paramList"
:key="row.id"
:style="row.param_apply ? null : { opacity: 0.4 }"
>
<td>
<v-checkbox
v-model="row.param_apply"
@change="apply_check" //이부분!!
/>
</td>
<td>
<TextInput
v-model="row.param_name"
dense
required
:error-messages="inputCheck(row.param_name, 'Param_Name')"
/>
</td>
<td>
<v-text-field
v-model="row.param_value"
dense
:error-messages="
inputCheck(row.param_value, 'Param_Value')
"
/>
</td>
<td>
<v-text-field v-model="row.param_desc" dense />
</td>
<td>
<v-btn x-small fab depressed>
<v-icon color="error" @click="removeParamRow(index)">
mdi-minus
</v-icon>
</v-btn>
</td>
</tr>
</tbody>
Script
checkedAll(checked) {
this.allChecked = checked
for (let i in this.paramList) {
this.paramList[i].param_apply = this.allChecked
}
},
참고
[Vue] 목록에서 체크박스(checkbox) - 전체선택 및 전체해제(all selected, deselected)
Vue에서 체크박스 전체 선택 및 전체 해제에 대한 코드 포스팅
linked2ev.github.io
'개발합시다. > FrontEnt 공부' 카테고리의 다른 글
[Vue] Component 강제 업데이트 (0) | 2022.09.26 |
---|---|
[Vue] v-text-input에서 숫자 입력범위 제한하기 (ev, limit) (0) | 2022.09.26 |
[JavaScript, Vue] Object안에 key값이 있는지 확인하는 방법 (0) | 2022.09.26 |
[Vue] Vuetify 비활성화(disabled) 조건부 설정하기 (0) | 2022.09.26 |
[Vue] 잘 까먹는 사실들 (every함수, td, mt/pt, mounted) (0) | 2022.09.26 |