The presence of a check mark in the checkbox is constant, even when the attribute is missing

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.

Answer №1

It seems like your code is functioning as expected. Keep up the good work!

Example :

new Vue({
  el: '#app',
  data () {
    return {
      checked: false,
      password: null
    }
  },
  methods : {
    noEntry() {
     let password;
     password = !this.checked ?
       "" :
     prompt("Only bookstore staff have access, please enter the password", "");
     this.checked = (password === 'administrations')  ?  true : false
     console.log(this.checked);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="checkbox" id="admin" v-model="checked" @change="noEntry">
</div>

Here's a suggestion : Use v-model directive in the password field instead of using prompt for better user experience.

Example :

new Vue({
  el: '#app',
  data () {
    return {
      checked: false,
      password: null
    }
  },
  methods : {
    noEntry() {
     this.checked = (this.password === 'administrations')  ?  true : false
     console.log(this.checked);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="password" v-model="password" placeholder="Enter your password">
  <input type="checkbox" id="admin" v-model="checked" @change="noEntry">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Several different forms are present on a single page, and the goal is to submit all of the data at

Looking for assistance with combining Twitter and Google data entry at once. Here's the code I've developed: Please guide me on how to submit Twitter and Google details together. <html> <head> <script type="text/javascript">< ...

Using a bound data variable in a filter within an ng-repeat loop (Angular JS)

<!-- Left Navbar --> <div class="container-fluid" style="margin-top: 50px"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul ng-repeat="type in types" class="nav nav-sidebar"> <li>{{ ...

How can we retrieve the value from a textBox using JavaScript in Selenium WebDriver?

https://i.sstatic.net/6ni0f.pngTrying to extract text from an input tag that is missing in the HTML code, leading to the need for JavaScript to retrieve the value. Unfortunately, running the code in Eclipse returns null as the result. The HTML and Seleni ...

Could someone help with why the target id is not being properly passed when clicking on a li

Currently, I am working on a ReactJS project utilizing MaterialUI. The code snippet I am dealing with is as follows: { this.state.categories.map((category, key) => ( <List> <ListItem button id={key} onClick={this.handleClick}> ...

Error message: After using gulp-npm-dist to copy only the dependency modules, the node module was not

I'm currently exploring different methods to package only the necessary node_modules dependencies for my project. After some research, I came across gulp-npm-dist and created a gulpfile.js. var gulp = require('gulp'); var npmDist = requir ...

Unleashing the power of TypeScript with Solid JS Abstract Class

Why am I getting an undefined error for my calcUtilisation method when using an Abstract Class as the type in createStore? Is there a way to utilize a type for the data along with a method within the same class for createStore? abstract class Account { ...

Is it necessary for the Jquery Component to return false?

I'm currently working on developing a jQuery module using BDD (Behavior-driven development). Below is the code snippet for my component: (function($) { function MyModule(element){ return false; } $.fn.myModule = function ...

Sorting arrays can yield varying results depending on the browser being used

The variations in output between Chrome 70.0, Chrome 69.0, and Firefox 63.0 for the same code are puzzling. var arr = [1,2,43,1233,5546,33,6,11]; arr.sort(() => -1); //[11, 6, 33, 5546, 1233, 43, 2, 1] arr.sort(() => 1); //[1, 2, 43, 1233, 5546, 33, ...

In the Sandbox, element.firstChild functions properly, but it does not work in the IDE

Encountered an issue that has me puzzled. To give you some context, I attempted to create a native draggable slider using React and positioned it in the center of the screen, specifically within my Codesandbox file. The code snippet I utilized is as follow ...

React component refuses to re-render

I am facing an issue with my menu re-rendering in React. The handleToggleFunction only works for the first click, after which nothing happens and the state does not update. I am using Tailwind CSS in this component. Here is my code: I have attempted to us ...

Using Angular 4's ngModel can result in the transformation of data type from 'number' to 'string'

I am facing an issue with my Angular4 app where data captured from a form is stored in DynamoDB. The problem arises when an input field typed as 'text' is bound to a Typescript 'number' field, which seems to be converting the object val ...

I am experiencing some unwanted movement of divs when I hide one element and show another. Is there a way to prevent this from happening

My webpage features a dynamic div that transforms into another div upon clicking a button. Although both divs share similar properties, clicking the button causes some elements to shift unexpectedly. Strangely enough, when the height of the replacing div i ...

The Angular service encounters issues when interacting with REST API

Within my application, a template is utilized: <div class="skills-filter-input" ng-class="{'hidden-xs': skillsFilterHidden}"> <input type="text" ng-model="skillQuery" ng-change="filterSkills()" placeholder="Filter skills" class="filter- ...

What is the best way to choose a date and time in a custom format within my React application?

I'm currently developing the front-end of my application using React. I am looking for a way to capture the date and time in the specific format shown in this image. Any suggestions or solutions would be greatly appreciated! ...

Dividing a string using regex to deal with numerical issues

My task involves processing a list of strings that look like this: Client Potential XSS2Medium Client HTML5 Insecure Storage41Medium Client Potential DOM Open Redirect12Low The goal is to split each string into three parts, like so: ["Client Potential X ...

"Duplicate content issue with ng-transclude causing element to render twice

Why is the transcluded directive displaying Name inside directive = Frank twice? I believed I had a good grasp on transclusion, but this specific scenario has left me puzzled. Check out this fiddle for more details <div ng-app="myApp" ng-controller=" ...

Troubleshooting problem with AngularJS and jQuery plugin when using links with # navigation

I have integrated a specific jquery plugin into my angularjs single page application. The primary block can be found in the following menu: http://localhost:81/website/#/portfolio This menu contains the following code block: <li> <a href=" ...

Experiencing an issue where the canvas element fails to render on mobile Chrome browser,

I've encountered an issue with a script that draws a canvas based on the background color of an image. The image is loaded dynamically from a database using PHP. The responsive functionality works fine on mobile Safari, but not on Chrome. When the re ...

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

Tips for effectively handling requestAnimationFrame

I created a unique function that both scrambles and translates text. The functionality is smooth if you patiently wait for the animation to finish before moving the mouse over to other elements. However, if you try to rush through to the next one, the prev ...