Подключите нашего Telegram-бота для уведомлений о новых проектах

Заказ закрыт
Перенос с Vue 2 на Vue 3

Разместить заказ
m
Заказчик
Отзывы фрилансеров: + 0 - 0
Зарегистрирован на сайте 5 месяцев
Бюджет: 1 501 — 2 000 ₽/час
Надо перенести компоненты с vue 2 на vue 3 с использованием Composition API.

`<template>
<div class="login-page">
<div class="container">
<form class="form" @submit="submit">
<h3 class="text-center mb-5">{{ $t('login') }}</h3>

<div class="mb-3">
<label for="usernameInput" class="form-label">{{
$t('username')
}}</label>
<input
type="text"
class="form-control"
id="usernameInput"
v-model="username"
/>
</div>
<div class="mb-3">
<label for="passwordInput" class="form-label">{{
$t('password')
}}</label>
<input
type="password"
class="form-control"
id="passwordInput"
v-model="password"
/>
</div>
<button
type="submit"
class="btn btn-primary w-100"
:disabled="username.trim() === '' || password.trim() === ''"
>
<span v-if="!loading">{{ $t('login') }}</span>
<div
v-if="loading"
class="spinner-border spinner-border-sm text-white"
role="status"
></div>
</button>

<div class="alert alert-danger mt-3" role="alert" v-if="isInvalid">
{{ $t('invalidUsernameOrPassword') }}
</div>
</form>

<div class="links">
<router-link class="text-info" to="/help">{{ $t('help') }}</router-link>
</div>
</div>
</div>
</template>

<script>
import { catchEveryRequest, getProfile, loadCities } from '../../helpers'

export default {
data() {
return {
username: '',
password: '',

loading: false,
isInvalid: false,
}
},

created() {
document.title = this.$t((this.$i18n.title = 'login'))

if (this.$store.state.admin) {
this.$router.replace('/admin')
}
},

methods: {
submit(e) {
e.preventDefault()

this.loading = true
this.isInvalid = false

this.username = this.username.trim()
this.password = this.password.trim()

this.$axios
.post('/admin/login', {
username: this.username,
password: this.password,
})
.then(() => {
getProfile(() => {
loadCities(() => {
this.isLoaded = true
this.$router.replace('/admin')
})
})
})
.catch((error) => {
this.loading = false

if (error.response && error.response.status === 400) {
this.isInvalid = true
} else {
catchEveryRequest({ error })
}
})
},
},
}
</script>

<style lang="scss">
@import '../../assets/variables';

.login-page {
.form,
.links {
max-width: 420px;
margin: 0 auto;
padding: 15px;
margin-top: 25px;
}

.links {
text-align: center;
margin-top: 10px;
display: flex;
flex-direction: column;
}
}
</style>`

примерно так выглядит код vue 2 и там используется html и sass коды.
Разделы:
Заказ
Опубликован:
14.12.2024 | 10:42 [поднят: 14.12.2024 | 10:42]
Заказ находится в архиве
Откликнуться Посмотреть другие заказы

Теги:

Наши партнеры
Сведения об ООО «Ваан» внесены в реестр аккредитованных организаций, осуществляющих деятельность в области информационных технологий. ООО «Ваан» осуществляет деятельность, связанную с использованием информационных технологий, по разработке компьютерного программного обеспечения, предоставлению доступа к программе для ЭВМ и является правообладателем программы для ЭВМ «Платформа FL.ru (версия 2.0)».