One of my goals is to develop a custom checkbox using Vue. The idea is to utilize two icons from fontawesome - one for a locked state and the other for an unlocked state. Essentially, I want the icon to be locked when the checkbox is checked, and unlocked when it is unchecked.
Below is the snippet of code I have been working on:
<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;
},
},
});
However, I keep encountering the following error:
Cannot assign to 'checked' because it is a constant or a read-only property
Do you have any suggestions on how to resolve this issue? Any help would be greatly appreciated.