Добрый день.
Только начинаю изучать 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'
})
