How to update props in vue component

Question

I want to create my own checkbox in Vue. I want to use two icons from fontawesome (lock and unlock). When my checkbox is checked then icon should be locked otherwise unlocked.

Here is my code:

<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;
    },
},
});

I received an error:

Cannot assign to 'checked' because it is a constant or a read-only property

Can you help resolve this issue?

Answer 1

Take a look at the prop.sync modifier. It is made for exactly this kind of case where you want to update the parents value but pass it as a property to the child:
https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

Basically you mark the prop as being sync'able:
<Checkbox :checked.sync="foo"></Checkbox>

And to update the parent you emit an update:prop event from the child:
this.$emit('update:checked', !this.checked)

This should get you started for your solution:
https://codesandbox.io/s/97rl86n64