جاوااسکریپت - چرا ویژگی غیرفعال من مطابق انتظار کار نمیکند؟

در پروژه Vue3 من، یک فرم برای ثبت یک کاربر جدید دارم.

فرم مذکور شامل یک ورودی رمز عبور، یک ورودی تایید رمز عبور و یک دکمه ذخیره است.
هر دو فیلد ورودی از v-on:input برای فراخوانی یک تابع تایپاسکریپت به نام comparePasswords استفاده میکنند. در آنجا، مقادیر هر دو ورودی با هم مقایسه میشوند و اگر برابر باشند، باید دکمه ذخیره فعال شود (و در غیر این صورت دوباره غیرفعال شود).

این دکمه از :disabled="!passwordsMatch" استفاده میکند، که صرفاً یک متغیر است که توسط تابع comparePasswords تنظیم میشود و به طور پیشفرض روی false قرار دارد.

وقتی من رمزهای عبور مطابقتدهنده را تایپ میکنم و نتیجه را ثبت میکنم، تابع کار خود را انجام میدهد و passwordsMatch برابر با true است. با این حال، دکمه توسط آن فعال نمیشود و به نظر میرسد که تازهسازی نمیشود.

راهحلهایی که توانستم آنلاین پیدا کنم، تقریباً به همان شیوه از :disabled استفاده میکنند.

پس چگونه دکمه خود را با نتیجهٔ تابع comparePasswords خود فعال/غیرفعال کنم؟

در اینجا کد مرتبط آورده شده است:

<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>

پاسخ شماره ۱

سعی کنید مانند قطعه کد زیر:

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>

پاسخ شماره ۲

این کد همانطور که در اینجا نشان داده شده عمل میکند

<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>