Вычисляемое свойство + Показать/скрыть DIV
Я не программист vue.JS, но меня попросили внести несколько изменений в существующее приложение. Я пытаюсь использовать вычисляемое свойство, чтобы показать/скрыть DIV.
Проблема в том, что вычисляемое свойство не вызывается после формы POST (я помещаю оператор console.info внутрь вычисляемого метода, чтобы убедиться, что оно даже не вызывается). Метод findLoginProvider вызывается успешно, и элементы localStorage установлены... но DIV не скрыт.
Как я уже сказал, я не программист vue.JS и не могу понять, почему это не работает... это упрощенный пример реальной страницы. Я действительно хочу, чтобы вычисляемые свойства работали, потому что у меня есть несколько DIV для отображения/скрытия на основе нескольких вычисляемых свойств (поэтому ручная настройка видимости определенного DIV не требуется)
HTML:
<div v-if = "showFindLoginProvider" :class = "{'disabled': isLoading}">
<form @submit.prevent = "findLoginProvider" method = "POST">
<div>
<label class = "block text-gray-700">Email Address</label>
<input
type = "email"
name = "email"
v-model = "email"
placeholder = "Enter Email Address"
autofocus
autocomplete
required
/>
</div>
<button type = "submit">Continue</button>
</form>
</div>
Методы:
findLoginProvider() {
this.isLoading = true;
UserService
.getLoginProvider(this.email)
.then((response) => {
if (response?.status === 200) {
localStorage.setItem("login_email", this.email);
localStorage.setItem("login_provider", JSON.stringify(response.data));
} else {
this.isError = "Error retrieving login provider";
}});
this.isLoading = false;
},
Вычислено:
showFindLoginProvider() {
console.info("showFindLoginProvider")
return !this.isLoggedIn && (!this.hasLoginEmail || !this.hasLoginProvider);
},
Ответы 1
Согласно документы
A computed property will only re-evaluate when some of its reactive dependencies have changed
Сказав, что в вашем fnc findLoginProvider вам нужно изменить реактивную переменную на fire showFindLoginProvider run
findLoginProvider() {
this.isLoading = true;
UserService
.getLoginProvider(this.email)
.then((response) => {
if (response?.status === 200) {
// will tell computed to run
this.isLoggedIn = true
// rest of your code
} else {
this.isError = "Error retrieving login provider";
}
});
this.isLoading = false;
},
isLoggedIn() { return localStorage.getItem("access_token") !== null; }
вы можете увидеть определение вычисленного I, перефразируя выше. isLoggedIn будет работать только Он читает, что реактивная переменная изменена, ваш код не будет работать, так как вы читаете хранилище браузера. вам нужно будет установить isLoggedIn как я упомянул для простоты
Я должен был включить это в исходный пост... но
isLoggedInтакже является вычисляемой опорой.