@diafree

Vue: как изменить состояние компонента после получения данных (Fetch)?

Добрый день.
Только начинаю изучать Vue, столкнулся с такой проблемой - есть компонент (форма авторизации), по событию submit отправляю / получаю данные по API (Fetch).
Собственно вопрос: как после получения данных изменить состояние компонента, т.е. скрыть / удалить его, т.к. он больше не нужен и отобразить другой компонент?
Пробовал изменить this.show = false, но эта переменная undefined

Vue.component('auth-form', {
	template: `
		<div>
			<form @submit.prevent="onSubmit" v-if="show">
				<div class="input-group mb-3">
					<div class="input-group-prepend">
				    	<span class="input-group-text" id="basic-addon1"><i class="far fa-user-circle"></i></span>
					</div>
					<input name="name" type="text" class="form-control" v-model="login" placeholder="Логин">
				</div>
				<div class="input-group mb-3">
					<div class="input-group-prepend">
				    	<span class="input-group-text" id="basic-addon1"><i class="fas fa-unlock-alt"></i></span>
					</div>
					<input name="password" type="password" class="form-control" v-model="password" placeholder="Пароль">
				</div>
				<div class="text-right"><button type="submit" class="btn btn-primary">Авторизоваться</button></div>
			</form>
		</div>
	`,
	data() {
		return {
			login: null,
			password: null,
			show: true
		}
	},
	methods: {
		onSubmit() {
			let data = {
				"login": this.login,
				"password": this.password
			}

			fetch('http://url', {
				method: 'post',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify(data),
				mode: 'cors',
			}).then(function(response) {
this.show = false;  //<-- undefined
				return response.json();
			}).then(function(response) {
				console.log(response);
			}).catch(alert);

			this.login = null
			this.password = null
		}
	}
})

var app = new Vue({
	el: '#app'
})
  • Вопрос задан
  • 339 просмотров
Решения вопроса 1
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
this undefined потому что во .then передается функция со своим контекстом
.then(function() {})
.then(() => {})
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы