하고 싶은 일

몇 개의 체크 상자가 있는데, 그 중 어느 것이 검사되었는지 알고 싶다.

어쨌든 완성판 코드.

<template>
  <section>
    <div v-for="(poke, i) in pokes" :key="i">
      <input
        :id="'poke' + i"
        type="checkbox"
        :value="poke"
        v-model="selectedPokes"
      >
      <label :for="'poke' + i">{{poke}}</label>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      pokes: [
        'ピカチュウ', 'カイリュー', 'ヤドラン', 'ピジョン', 'コダック', 'コラッタ', 'ズバット', 'ギャロップ'
      ],
      selectedPokes: []
    }
  }
}
</script>

자세하다

아래와 같이 하나의 복선상자에 대해 하나v-model를 사용하면 실현할 수 있다.

<template>
  <section>
    <input
      id="pika"
      type="checkbox"
      v-model="pika"
    >
    <label for="pika">ピカチュウ</label>

    <input
      id="kai"
      type="checkbox"
      v-model="kai"
    >
    <label for="kai">カイリュー</label>

    <input
      id="yado"
      type="checkbox"
      v-model="yado"
    >
    <label for="yado">ヤドラン</label>
  </section>
</template>

<script>
export default {
  data() {
    return {
      pika: false,
      kai: false,
      yado: false
    }
  }
}
</script>

하지만 100개의 복선상자가 있다면 그렇게 하지 않을 것이다.
(단, 복선상자가 실제로 100개가 있다면 디자인을 다시 고려하는 것이 좋다.)
또한 API 등에서 목록을 내보낼 경우 확인란이 몇 개인지 알 수 없으면 곤란하다.

해결책

checkbox원소:value

v-model에서 배열로 수신하다.

<div v-for="(poke, i) in pokes" :key="i">
  <input
    :id="'poke' + i"
    type="checkbox"
    :value="poke"
    v-model="selectedPokes"
  >
  <label :for="'poke' + i">{{poke}}</label>
</div>

selectedPokes: []

이렇게 하면 위에 붙인gif처럼 여러 개의 값을 유지할 수 있다.

실패 모드

수신v-model의 초기 값data을 정렬하지 않으면 실패합니다.

selectedPokes: ''

끝맺다

사실대로 말하면, 나는 이렇게 하면 될지 안 될지 모르겠다.
자세한 건 꼭 알려주세요.
그리고 나는 단지