I am encountering an issue with my code where, upon clicking on my checkbox, the state is set to false but the check mark still remains visible when it shouldn't be present. Here is my code:
<template>
<div id="demo">
<form action="#/login" >
<input type="email" placeholder="Insert your email address to create your account"/>
<input type="password" placeholder="Enter your password here">
<label for="admin"> Administrator Rights </label>
<input type="checkbox" id="admin" v-model="checked" @change="noEntry">
</form>
</div>
</template>
<script>
module.exports = {
name: "Signup",
data () {
return {
checked: false,
}
},
methods : {
noEntry()
{ let password;
password = !this.checked ?
"" :
prompt("Only the library staff have access, please enter the password", "");
password === "administrations" ? this.checked = true : this.checked = false
console.log(this.checked)
}
}
}
</script>
<style scoped>
</style>
Here is a screenshot of the problem for reference:
https://i.sstatic.net/wefX6.png
Thank you for your assistance.