[Vue] 목록에서 v-checkbox 전체선택, 해제

상황

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

---

참고

https://linked2ev.github.io/vue/2020/12/06/Vue-%EB%AA%A9%EB%A1%9D%EC%97%90%EC%84%9C-%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4(checkbox)-%EC%A0%84%EC%B2%B4%EC%84%A0%ED%83%9D-%EB%B0%8F-%EC%A0%84%EC%B2%B4%ED%95%B4%EC%A0%9C(all-selected,-deselected)/ 

[Vue] 목록에서 체크박스(checkbox) - 전체선택 및 전체해제(all selected, deselected)