Vue :disable Button not working as expected-CodePudding

In my Vue3 Project i have a form for registering a new user.

Said form contains a password input, a confirm password input and a save button. Both input fields use v-on:input to trigger a typescript function called comparePasswords. In there both input values are compared and if they are equal, should enable the save button (and else disable it again).

The button uses :disabled="!passwordsMatch", which is just a variable that is set by the comparePasswords function, and by default is set to false.

When i type in matching passwords and log the result, the function does its job and passwordsMatch is true. However the button is not activated by it, seemingly does not refresh.

Solutions i could find online were using :disabled pretty much in the same way.

So how do i have my button enabled / disabled with the result of my comparePasswords function?

Here's the relevant code:

<template>
    <input v-model="adminPass" placeholder="Password" type="password" v-on:input="comparePasswords"/>
    <input v-model="adminPassVerification" placeholder="Confirm Password" type="password" v-on:comparePasswords/>
    <button :disabled="!passwordsMatch">Save</button>
</template>

<script setup lang="ts">
    import {ref} from 'vue'

    //Getting the data from input
    var adminPass = ref('')        
    var adminPassVerification('')

    var passwordsMatch: boolean = false

    function comparePasswords() {
        if(adminPass.value != '') { //Checks if input is empty
            passwordsMatch = adminPass.value == adminPassVerification.value //Updates passwordsMatch
            console.log(passwordsMatch)
        }
    }
</script>

CodePudding user response：

Try like following snippet:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const adminPass = ref('')        
    const adminPassVerification = ref('')
    const passwordsMatch = ref(false)
    function comparePasswords() {
      if(adminPass.value !== '') {
        passwordsMatch.value = adminPass.value === adminPassVerification.value
      }
    }
    return {
      adminPass, adminPassVerification, passwordsMatch, comparePasswords
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <input v-model="adminPass" @input="comparePasswords" placeholder="Password" type="password" />
  <input v-model="adminPassVerification" @input="comparePasswords" placeholder="Confirm Password" type="password" />
  <button :disabled="!passwordsMatch">Save</button>
</div>

CodePudding user response：

This code works as shown here

<template>
  <input v-model="adminPass" placeholder="Password" type="password" @input="comparePasswords" />
  <input v-model="adminPassVerification" placeholder="Confirm Password" type="password" @input="comparePasswords" />
  <button :disabled="!passwordsMatch">Save</button>

  <p>{{ passwordsMatch }}</p>
</template>

<script setup>
import {ref} from 'vue'

const adminPass = ref('')        
const adminPassVerification = ref('')
const passwordsMatch = ref(false)

function comparePasswords() {
  if(adminPass.value) {
    passwordsMatch.value = adminPass.value === adminPassVerification.value
    console.log(passwordsMatch)
  }
}
</script>