.NET Core 3中Vue.js在CSHTML登录页失效问题求助

我之前碰到过类似的情况，你的问题核心在于没有利用Vue的响应式绑定，反而手动操作DOM，再加上Razor模板和Vue指令的交互细节导致状态不同步。下面是具体的分析和修复方案：

问题根源 #

1. 手动DOM操作违背Vue原则：你通过setPasswordDisabled直接操作document.getElementById来设置输入框禁用状态，这种方式绕开了Vue的响应式系统，容易导致视图和数据不一致。
2. 单选按钮状态未与Vue数据绑定：硬编码的checked属性和手动的@@click事件，没有和Vue的isNewAccount数据建立双向绑定，导致点击单选按钮时数据无法正确更新，进而v-if指令失效，两个按钮同时显示。
3. Razor转义的潜在干扰：虽然@@click会被Razor解析为Vue支持的@click，但这种混合写法不如直接使用Vue原生指令（比如v-on:click或v-model）可靠。

修复方案 #

我们改用Vue的响应式绑定来重构代码，彻底避免手动DOM操作：

1. 修改Login.cshtml中的单选按钮和密码输入框 #

把原来的单选按钮替换为v-model绑定，密码输入框用:disabled绑定状态：

<!-- 替换原单选按钮部分 -->
<div class="login-form__radio-group">
    <input type="radio" class="login-form__radio-group-radio radio" v-model="isNewAccount" :value="true" id="signin_new_customer">
    <label for="signin_new_customer">No, sign me up.</label>
</div>
<div class="login-form__field login-form__radio-group">
    <input type="radio" class="login-form__radio-group-radio radio" v-model="isNewAccount" :value="false" id="signin_existing_customer">
    <label for="signin_existing_customer">Yes, my password is</label>
    <div class="login-form__radio-group">
        <input class="login-form__input control input" asp-for="Input.Password" id="auth-password" :disabled="isNewAccount" required />
        <span asp-validation-for="Input.Password" class="has-text-danger"></span>
    </div>
</div>

<!-- 提交按钮部分保持不变，v-if会自动响应isNewAccount的变化 -->
<div class="login-form__submit">
    <input v-if="!isNewAccount" class="login-form__submit-button button is-success" type="submit" name="name" value="Sign In" />
    <a v-if="isNewAccount" class="login-form__submit-button button is-success" asp-page="/Accounts/Register">Sign Up</a>
</div>

2. 简化login.js代码 #

移除冗余的setPasswordDisabled方法，让Vue的响应式系统自动处理状态：

var app = new Vue({
    el: '#app',
    data: {
        isNewAccount: false // 初始状态对应"现有客户"，和原逻辑一致
    },
    methods: {
        toggleModal() {
            var modal = document.getElementById("modal");
            modal.classList.toggle("is-active");
        }
    }
});

为什么这样修复？ #

• v-model双向绑定：单选按钮组绑定到isNewAccount后，点击单选按钮会自动更新Vue数据，数据变化又会同步到视图，完美解决v-if失效的问题。
• :disabled响应式绑定：密码输入框的禁用状态直接由isNewAccount控制，无需手动操作DOM，保证数据和视图始终一致。
• 代码更简洁可靠：去掉了容易出错的手动DOM操作，完全遵循Vue的开发模式，减少了潜在bug。

额外检查点 #

• 确保Vue实例挂载的时机正确：login.js应该在#app元素渲染完成后加载（你的@section scripts已经放在页面底部，这一点是对的）。
• 确认Razor没有干扰Vue指令：v-model、:disabled这些指令Razor不会解析，直接保留在HTML中，Vue能正确识别。

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