커스텀 체크박스에서 Vue 양방향 데이터 바인딩

vue 응용 프로그램을 작성할 때 사용자 지정 입력 구성 요소를 작성해야 하는 상황에 직면할 수 있으므로 양방향 데이터 바인딩 기능을 활용할 수 있습니다.

간단한 사용자 정의 텍스트 입력은 쉽게 달성할 수 있으며 documented here

그러나 사용자 지정 확인란 구성 요소에서 동일한 양방향 데이터 바인딩 기능을 달성하는 다른 접근 방식이 있습니다.

사용자 지정 확인란 구성 요소 만들기

구성 요소 생성을 시작하겠습니다. 확인란을 렌더링하는 것만 큼 간단하고 소품을 통해 레이블을 설정할 수 있습니다.

체크박스.vue

<template>
    <label>
        <input  type="checkbox" :value="inputValue"  v-model="model" />
        <span>{{ label }}</span>
    </label>
</template>

<script>
export default {
  name: "Checkbox",
  props: {
    label: String,
    value: Array,
    inputValue: String,
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
};
</script>

이제 이 부분을 살펴보십시오.

<input  type="checkbox" :value="inputValue"  v-model="model" />

우리는 체크박스 입력을 정의하고 value 속성을 우리의 inputValue 에 바인딩하고 있습니다. 예를 들어 일반 html에서 하는 것처럼 양식 제출에 대한 입력 값을 결정하는 데 사용됩니다.

<input  type="checkbox" value="somoething" />

이제 v-model는 계산된 속성인 model라는 속성에 바인딩됩니다.

computed: {
    model: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },

이 속성에 대한 getter는 단순히 값을 v-model로 반환하고 데이터를 업데이트해야 할 때 setter를 통해 입력 이벤트를 내보내서 이 사용자 정의 체크박스 구성 요소를 사용하는 애플리케이션의 일부가 값을 가질 수 있도록 합니다. 업데이트되었습니다.

새 확인란을 표시할 때마다 이 확인란 값이 value 속성에 바인딩된 이 배열로 푸시되기 때문에 v-model 속성이 배열로 선언되었다는 점에 유의하는 것이 중요합니다.

구성 요소 사용

이제 구성 요소가 작동하는 방식을 정의했으므로 예제에서 사용하고 작동하는지 확인할 수 있습니다.

방금 만든 이 확인란 구성 요소를 사용할 간단한 Vue 구성 요소를 정의하겠습니다.

홈뷰

<template>
  <div>
    <Checkbox label="React" inputValue="react" v-model="selectedOptions" />
    <Checkbox label="Vue" inputValue="vue" v-model="selectedOptions" />
    <Checkbox label="Angular" inputValue="angular" v-model="selectedOptions" />

    <br /><br /><br />

    <ul>
      <li v-for="(option, index) of selectedOptions" :key="index">
        {{ option }}
      </li>
    </ul>
  </div>
</template>

<script>
import Checkbox from "./Checkbox";

export default {
  name: "Home",
  props: {},
  components: {
    Checkbox,
  },
  data() {
    return {
      selectedOptions: [],
    };
  },
};
</script>

이 예에서는 사용 중인 세 개의 확인란 구성 요소가 있으며 각 구성 요소에 대해 세 가지 다른 값(react, vue and angular)과 해당 레이블이 있습니다.

    <Checkbox label="React" inputValue="react" v-model="selectedOptions" />
    <Checkbox label="Vue" inputValue="vue" v-model="selectedOptions" />
    <Checkbox label="Angular" inputValue="angular" v-model="selectedOptions" />

v-model 속성을 배열이 될 홈 구성 요소의 반응성 데이터 속성selectedOptions에 바인딩하고 있습니다.

입력을 확인하거나 선택 취소할 때마다 이 항목selectedOptions을 업데이트하는지 확인하기 위해 간단한 루프를 추가하여 selectedOptions 배열의 각 값을 렌더링했습니다.

<ul>
    <li v-for="(option, index) of selectedOptions" :key="index">
        {{ option }}
    </li>
</ul>

선택된 항목 없음:


모두 선택됨:


2개 선택:


CodeSandbox에서 작업 예제를 볼 수 있습니다.