复选框复选标记始终存在，而属性不存在

Question

我的代码有问题，所以当我点击我的复选框时，我的复选框状态被设置为 false 但我总是 mark/tick 存在，而它通常不在这里... 我的代码：

<template>
  <div id="demo">
    <form action="#/login" >
      <input type="email" placeholder="Insérez votre adresse-mail pour créer votre compte"/>
      <input type="password" placeholder="Mettez y votre mot de passe">
      <label for="admin"> Droits administrateurs </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("Seul le personnel de la librairie y a accès, veuillez inscrire le mot de passe", "");
        password === "administrations" ? this.checked = true : this.checked = false
        console.log(this.checked)
      }
    }
  }
</script>

<style scoped>

</style>

问题图片：

谢谢你

Answer 1

我不确定你想用你的代码做什么，但它按照你的期望工作得很好。

演示 :

new Vue({
  el: '#app',
  data () {
    return {
      checked: false,
      password: null
    }
  },
  methods : {
    noEntry() {
     let password;
     password = !this.checked ?
       "" :
     prompt("Seul le personnel de la librairie y a accès, veuillez inscrire le mot de passe", "");
     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>

我的建议 : 在密码字段中使用 v-model 指令来获取值而不是使用提示。

演示 :

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="Mettez y votre mot de passe">
  <input type="checkbox" id="admin" v-model="checked" @change="noEntry">
</div>

复选框复选标记始终存在，而属性不存在

Checkbox check mark is always present while the attribute is not

javascript

vue.js