[vuejs 관련] Checkbox component

Checkbox component

---

component .vue파일

<template>
  <div class="m_checkbox" :class="{ nolabel: txt === '' }">
    <input type="checkbox" :name="name" :id="idfor" :value="value" /><label :for="idfor">{{ txt }}</label>
  </div>
</template>

<script setup>
const props = defineProps({
  name: {
    type: String,
    defatult: undefined
  },
  idfor: {
    type: String,
    defatult: undefined
  },
  value: {
    type: String,
    defatult: undefined
  },
  txt: {
    type: String,
    default: ''
  }
})
</script>
<!--
  // 부모 컴포넌트에서 사용 시
  # name : checkbox name
  # idfor : checkbox id = label for
  # value : checkbox value
  # txt : label

  <Checkbox name="name" idfor="idfor" value="value" txt="text" />

  ex : <Checkbox name="agreeall" idfor="agreeall" v-model="agree.checkAll"
           @change="checkAll($event)" txt="전체 동의" />
 -->

불러오는 .vue 파일에

<template>
  ...
  <Checkbox name="agree" idfor="agree" @change="checkOk($event)" txt="동의" />
  ...
</template>

<script setup>
import { ref } from "vue";
import Checkbox from "@/components/Checkbox.vue";

//
const info = ref({
  checkok: false,
})

//
const checkOk = (e) => {
  info.value.checkok = e.target.checked;
  console.log(info.value.checkOk);
}

Checkbox component

끝.