• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

props으로 가져온 반응형 변수 업데이트 이슈

22.10.03 18:13 작성 조회수 1.6k

0

안녕하세요? 항상 좋은 강의 감사드립니다🙂

아래와 같은 상황에서 warning이 발생하고 있는데 답변주시면 정말 감사하겠습니다 ㅠㅠ


  1. 부모 컴포넌트에서 자식 컴포넌트로 prop으로 값을 넘겨줌
    <ChildVue

    v-model:my-value="value"

    />
    <script setup>
    import { ref } from "vue";
    const value = ref("");
    </script>

  2. 자식 컴포넌트에서 toRef를 이용하여 반응성을 잃지 않도록 구조분해 할당
    import { toRef } from "vue";
    const props = defineProps({

    myValue: String,

    });

    const myValueInput = toRef(props, "myValue");

  3. 구조분해 할당한 반응형 변수를 자식 컴포넌트 내 text input에 binding. 입력값이 변경되는 경우 emit을 통해 업데이트
    <input type="text"

    @input="$emit('update:myValue', $event.target.value)"

    v-model="myValueInput" />


위와 같이 개발을 하니 제가 생각했던대로 동작은 잘 하는데요... 계속 아래와 같은 warning이 뜨고 있습니다 ㅠㅠ

reactivity.esm-bundler.js:4 [Vue warn] Set operation on key "myValue" failed: target is readonly.

강의에서 짚어주신 점들(자식 컴포넌트 내부에서 props 직접변경 X, 반응형을 잃지 않는 구조분해 할당 등)을 제 나름대로 고려했는데 왜 저런 warning이 지속적으로 뜨는 걸까요...?

답변주심 정말 감사드리겠습니다 ㅠㅠ

 

+) 혹시 다음 강의 계획은 어떻게 되시나요?

답변 2

·

답변을 작성해보세요.

3

안녕하세요 :)

이유 : 자식 컴포넌트에서 props를 직접적으로 변경했기 때문

설명

<input type="text"

@input="$emit('update:myValue', $event.target.value)"

v-model="myValueInput" />

v-model(양방향) 대신 :value(단반향) 바인딩으로 설정해야해요~!

v-model 에서 myValueInput(Props 데이터)를 직접적으로 변경하기때문에용~!

그리고 다음 강의는

  • Quasar(based Vue3)로 UI를 만드는 강의와

  • Vue3 + Quasar + Firebase로 커뮤니티 사이트를 만드는 강의를 준비하고 있어요~!

감사합니다 🙂

 

1

FULL님의 프로필

FULL

2022.10.10

Vue3 + Quasar + Firebase !!!
군침이 도네요 강사님 ... 화이팅입니다 !!!

넵넵~!! 화이팅 감사합니다 🙂