Vue3中按钮disabled属性未按预期生效该如何解决？

你的代码里有三个关键问题导致按钮状态不更新，逐一修正即可：

• adminPassVerification 定义错误：你没有用 ref() 包裹这个变量，导致它不是响应式的，输入确认密码时无法正确追踪值的变化。
• passwordsMatch 不是响应式变量：普通布尔变量的修改不会触发Vue的视图更新，所以即使控制台显示true，按钮也不会刷新。
• 第二个输入框事件绑定错误：你写的是 v-on:comparePasswords，这是无效的事件名，应该绑定 input 事件来触发对比函数。

修正后的完整代码如下：

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

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

    // 用ref声明响应式变量
    const adminPass = ref('')        
    const adminPassVerification = ref('')

    // 将passwordsMatch改为响应式引用
    const passwordsMatch = ref(false)

    function comparePasswords() {
        if(adminPass.value !== '') {
            // 更新响应式变量的value属性
            passwordsMatch.value = adminPass.value === adminPassVerification.value
            console.log(passwordsMatch.value)
        } else {
            // 密码为空时重置匹配状态
            passwordsMatch.value = false
        }
    }
</script>

额外补充：函数里增加了密码为空时重置passwordsMatch的逻辑，避免用户清空密码后按钮还保持启用状态。

内容的提问来源于stack exchange，提问作者Jannes