vue 체크박스 편집이 0인 이유는 무엇입니까?

vue는 사용자 인터페이스 구축에 널리 사용되는 JavaScript 프레임워크입니다. 일반적인 구성 요소 중 하나는 사용자가 여러 옵션 중에서 선택할 수 있는 확인란입니다. 하지만 체크박스 값을 편집하면 0이 되는 경우가 있는데, 이는 예상했던 것과 다릅니다. 이 기사에서는 이 문제의 원인과 해결 방법에 대해 설명합니다.

먼저 vue에서 체크박스의 기본 사용법을 살펴보겠습니다. v-model 지시문을 사용하여 체크박스의 값을 바인딩할 수 있습니다:

<template>
  <div>
    <input type="checkbox" v-model="checked" />
    {{ checked }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

위의 예에서는 체크박스의 값을 selected 속성에 바인딩합니다. 확인란이 선택되어 있으면 확인된 값은 true이고, 그렇지 않으면 false입니다. 체크박스가 예상대로 작동하는지 확인하기 위해 템플릿에 체크된 값을 표시할 수 있습니다.

이제 체크박스의 값을 편집해 보겠습니다. 예를 들어 사용자가 체크박스를 클릭하면 해당 값을 true 대신 1로 설정하려고 합니다. 체크박스의 변경 이벤트를 수신하여 이를 달성할 수 있습니다:

<template>
  <div>
    <input type="checkbox" v-model="checked" @change="handleChange" />
    {{ checked }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleChange() {
      if (this.checked) {
        this.checked = 1
      } else {
        this.checked = 0
      }
    }
  }
}
</script>

위 코드에서는 체크박스에 변경 이벤트 리스너를 추가했습니다. 체크박스의 값이 변경되면 handlerChange 메서드가 호출됩니다. 이 방법에서는 필요에 따라 확인된 값을 각각 1 또는 0으로 설정합니다.

그러나 위의 코드를 실행하면 체크박스의 값이 1이 아닌 0이 되는 것을 알 수 있습니다. 이는 Vue가 체크박스 값을 숫자 값이 아닌 문자열로 구문 분석하기 때문입니다. 따라서 check에 값 1을 할당하면 값 1이 아닌 문자열 "1"로 구문 분석됩니다. 확인란의 값이 다시 숫자 값으로 변환되면 "1"은 참이 아닌 값으로 해석되고 숫자 값으로 변환되면 0이 되므로 0이 됩니다.

그렇다면 이 문제를 어떻게 해결할까요? 한 가지 방법은 문자열을 숫자 값으로 변환하기 위해parseInt 메소드를 사용하는 것입니다:

<template>
  <div>
    <input type="checkbox" v-model="checked" @change="handleChange" />
    {{ checked }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleChange() {
      if (this.checked) {
        this.checked = parseInt(1)
      } else {
        this.checked = parseInt(0)
      }
    }
  }
}
</script>

위 코드에서 우리는 숫자 값 1과 0을 숫자 유형으로 변환하기 위해parseInt 메소드를 사용했습니다. 이렇게 하면 확인란의 값이 다시 숫자 유형으로 변환될 때 0이 아닌 1로 유지됩니다.

또 다른 해결책은 문자열을 숫자 값으로 변환할 수 있는 Number 유형을 사용하는 것입니다.

<template>
  <div>
    <input type="checkbox" v-model="checked" @change="handleChange" />
    {{ checked }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  },
  methods: {
    handleChange() {
      if (this.checked) {
        this.checked = Number(1)
      } else {
        this.checked = Number(0)
      }
    }
  }
}
</script>

위 코드에서는 Number 메소드를 사용하여 문자열을 숫자 유형으로 변환했습니다. 이렇게 하면 확인란의 값이 다시 숫자 유형으로 변환될 때 0이 아닌 1로 유지됩니다.

요약하자면, vue에서 체크박스의 값을 편집할 때 숫자 값이 아닌 문자열로 구문 분석된다는 점에 유의해야 합니다. 이 문제를 방지하려면 parsInt 또는 Number 메서드를 사용하여 문자열을 숫자 유형으로 변환할 수 있습니다. 이런 식으로 체크박스 값을 성공적으로 편집할 수 있습니다!

위 내용은 vue 체크박스 편집이 0인 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!