javascript - Vue.js 在我的一个 cshtml 页面中不起作用

问题描述

我正在使用 NET Core 3 和 VueJS 开发一个站点，我有一个登录页面：

@page
@model project.Web.Pages.Accounts.LoginModel
@{
    ViewData["Title"] = "User Login - ";
    Layout = "../Shared/_Layout";
}

<!-- add class=modal-->
<div id="app">

<div id="modal">
    <div class="modal-background"></div>
    <div class="modal-content">
        <div class="columns is-centered">
            <div class="column is-12">
                <div class="card auth-card">
                    <div class="card-content">
                        <div class="login-form is-grouped-centered">
                            <form method="post">
                                <p class="login-form__title subtitle">Sign In or Register</p>
                                <div asp-validation-summary="All" class="has-text-danger"></div>
                                <div class="login-form__field field">
                                    <div class="login-form__email-group form-row">
                                        <label class="login-form__email-label" asp-for="Input.Email">My Email</label>
                                        <input class="login-form__input control input" asp-for="Input.Email" id="email-input" placeholder="john.doe@example.com" required maxlength="255" />
                                        <span asp-validation-for="Input.Email" class="has-text-danger"></span>
                                    </div>
                                </div>
                                <p class="login-form__title subtitle">Are you an existing customer?</p>
                                <div class="login-form__radio-group">
                                    <input type="radio" class="login-form__radio-group-radio radio" @@click="setPasswordDisabled(true)" name="new_account" value="1" 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" @@click="setPasswordDisabled(false)" name="new_account" value="0" id="signin_existing_customer" checked>
                                    <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" required />
                                        <span asp-validation-for="Input.Password" class="has-text-danger"></span>
                                    </div>
                                </div>
                                <div class="field has-text-right">
                                    <a href="#">Forgotten your password?</a>
                                </div>
                                <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>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button class="modal-close is-large" aria-label="close" @@click="toggleModal()"></button>
</div>
</div>

@section scripts {
    <script src="~/js/login.js"></script>
}

然后我在 login.js 中有这个脚本：

var app = new Vue({
    el: '#app',
    data: {
        isNewAccount: false
    },
    methods: {
        setPasswordDisabled(value) {
            document.getElementById("auth-password").disabled = value;

            value === true ? this.isNewAccount = true : this.isNewAccount = false;
        },
        toggleModal() {
            var modal = document.getElementById("modal");

            modal.classList.toggle("is-active");
        }
    }
});

当我打开网络选项卡时，我可以看到 Login.js 已加载，但它并没有点击那里的功能，我在 js 文件中设置了一些 console.logs，它看起来死了，没有任何反应。

我还尝试将 Login.cshml 标记包装到 div id="app" 中，但它不能解决我的问题，我在控制台中没有错误/警告，我真的不知道发生了什么。非常令人沮丧，我可以看到属性 isNewAccount 出现在 vue 开发工具中，但是当我单击单选按钮时它的值永远不会改变，它总是错误的，而且它甚至不知道它在登录页面中的值是什么仍然显示两个按钮，这是完全错误的，因为我清楚地添加了 v-ifs 以根据该道具显示一个或另一个。以前有人遇到过这个问题吗？

标签： javascriptvue.jsasp.net-corerazor

javascript - Vue.js 在我的一个 cshtml 页面中不起作用

问题描述

解决方案

推荐阅读