vue 구성 요소에서 소품을 업데이트하는 방법

vue 구성 요소에서 소품을 업데이트하는 방법

Vue에서 나만의 체크박스를 만들고 싶다.폰타썸(잠금 및 잠금 해제)의 아이콘을 2개 사용하고 싶습니다.체크박스를 켜면 아이콘이 잠겨야 합니다.그렇지 않으면 잠금이 해제됩니다.

코드는 다음과 같습니다.

<template>
   <div>
      <i @click="statusChanged()" v-if="!checked" class="fas fa-lock-open lock"></i>
      <i @click="statusChanged()" v-if="checked" class="fas fa-lock lock"></i>
   </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop } from 'vue/types/options';
export default Vue.extend({
    props: {
        checked: {
        type: Boolean as Prop<boolean>,
    },
},
methods: {
    statusChanged() {
        this.checked = !this.checked;
    },
},
});

에러를 수신했습니다.

상수 또는 읽기 전용 속성이므로 '체크'에 할당할 수 없습니다.

이 문제 해결을 도와주시겠습니까?

다음 항목을 참조하십시오.prop.sync수식어부모값을 갱신하고 싶지만 자녀에게 속성으로 전달하고 싶은 바로 이런 경우에 맞게 작성되었습니다.
https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

기본적으로 소품에는sync'가능:
<Checkbox :checked.sync="foo"></Checkbox>

내보내는 부모를 업데이트하려면update:prop이벤트:
this.$emit('update:checked', !this.checked)

이것으로 솔루션을 시작할 수 있습니다.
https://codesandbox.io/s/97rl86n64

^{OP @Marrek에 의해 원래 질문으로 편집된 답변으로 커뮤니티에 의해 복사되었습니다.}

나는 그 문제를 해결할 수 있었다.솔루션은 @TommyF가 제안한 것과 매우 유사했습니다.

해결책은 다음과 같습니다.

<template>
<div>
    <i v-if="!checked" class="fas fa-lock-open lock" @click="statusChanged()"></i>
    <i v-if="checked" class="fas fa-lock lock" @click="statusChanged()"></i>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop } from 'vue/types/options';
export default Vue.extend({
    props: {
        checked: {
            type: Boolean as Prop<boolean>,
        },
    },
    model: {
        prop: 'checked',
        event: 'click',
    },
    methods: {
        statusChanged() {
            this.$emit('click', !this.checked);
        },
    },
});
</script>

언급URL : https://stackoverflow.com/questions/52900308/how-to-update-props-in-vue-component