inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

Controlled Component - 구현 방법과 활용처

value 값의 의미

297

dev

작성한 질문수 12

1

안녕하세요! 실습하다 궁금하게 생겨 질문 남깁니다.
제가 생각하기로는 checked 가 true인 경우 체크 상태가 되는 것으로 생각했는데요.
checked가 어떤 값이라도 맨 처음 렌더링 되는 경우 체크 상태가 되지 않고 체크 때마다 boolean 값이 반대가 되는 것을 확인했는데요.

(즉, value가 false여도 체크 됨.)

 

<template>
  <check-box v-model="checked"></check-box>
</template>

<script>
import CheckBox from "./components/CheckBox.vue";

export default {
  components: {
    CheckBox,
  },
  data() {
    return {
      checked: true,
    };
  },
};
</script>

 

<template>
  <div>
    <input type="checkbox" :value="value" @click="toggleCheckBox" />
  </div>
</template>

<script>
export default {
  // @input 이벤트
  // :value 값

  props: ["value"],
  methods: {
    toggleCheckBox() {
      this.$emit("input", !this.value);
    },
  },
};
</script>

 

 

왜 이런건가요? 결국 value 값 상관없이 값이 변화되면 반대 상태가 되는 건가요?

 

javascript vuejs

답변 1

0

캡틴판교

안녕하세요 dev 님, 체크 박스는 checked, change 조합이예요 :)

깃 권한 요청 드립니다

0

68

1

깃 권한 신청

0

62

1

깃 권한 요청드립니다.

0

120

1

깃허브 권한 요청 드립니다

0

154

1

깃허브 권한 요청 드립니다

0

169

1

깃허브 권한 요청 드립니다

0

176

1

깃허브 권한 요청 드립니다.

0

158

1

안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.

0

214

1

ide 타입추론 기능 사용할 수 없을까요??

0

218

1

컴포넌트 링크는 vue peek 익스텐션 설치가 필수인가요??

0

239

1

Vue3로 진행중입니다

1

341

1

Vue router-link 사용시 같은 url이면

1

512

1

vue3 에러 메세지...

1

686

2

id ="app" 중복

0

278

2

use undefined 에러가 나옵니다.

1

329

2

깃허브 권한 요청드립니다.

1

366

2

권한요청드립니다.

1

305

2

Vue3에서 구글 애드센스 탑재하기

1

441

2

코드가 정상 작동 되는건지 ...

1

315

1

강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?

1

254

1

vuex 적용시 질문

1

298

2

라우터 버전이 안맞는데 어떤걸 써야하나요

1

388

2

UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..

1

458

2

권한요청 드립니다!

1

278

2