Я разрабатываю сайт, используя 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>
}
И затем у меня есть этот скрипт в логине. 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");
}
}
});
Когда я открываю вкладку сети, я вижу логин. js был загружен, но он не влияет на функции, я установил несколько console.logs в файле js и он выглядит мертвым, ничего не происходит.
Я также пробовал обернуть разметку Login.cshml в div id = "app", но это не решило мою проблему, у меня нет ошибок / предупреждений в консоли, я буквально не понимаю, что происходит на. Это довольно неприятно, я вижу, что свойство isNewAccount отображается в инструментах vue dev, но его значение никогда не меняется, когда я нажимаю радиокнопки, оно всегда ложно, а также оно даже не знает, какое значение оно имеет на странице входа поскольку он все еще показывает обе кнопки, что совершенно неверно, поскольку я явно добавляю туда v-if, чтобы показать ту или иную в зависимости от этой опоры. У кого-нибудь была эта проблема раньше?
