Skip to content

Commit 463ef3b

Browse files
N-LaboratoryN-Laboratory
committed
refactor: refactoring vue file
1 parent bc2e459 commit 463ef3b

File tree

5 files changed

+80
-33
lines changed

5 files changed

+80
-33
lines changed

‎src/components/atoms/BaseTextInput.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,26 @@ interface Props {
55
interface Emits {
66
(e: 'update:modelValue', newValue: string): void
77
}
8+
89
const props = defineProps<Props>()
910
const emit = defineEmits<Emits>()
11+
1012
const value = computed({
11-
get (): string {
13+
get(): string {
1214
return props.modelValue
1315
},
14-
set (value: string) {
16+
set(value: string) {
1517
emit('update:modelValue', value)
16-
}
18+
},
1719
})
1820
</script>
1921

2022
<template>
21-
<input v-model="value" type="text">
23+
<input
24+
v-model="value"
25+
type="text"
26+
placeholder="text"
27+
>
2228
</template>
2329

2430
<style scoped></style>

‎src/pages/formInline.vue‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,26 @@ import { useUserStore } from '../store/user'
55
const router = useRouter()
66
const store = useUserStore()
77
8-
const submit = (values: Record<string, any>) => {
8+
const submit = async (values: Record<string, string>) => {
99
store.setUserInfo(values.email, values.password)
10-
router.push('/myPage')
10+
await router.push('/myPage')
1111
}
1212
</script>
1313

1414
<template>
1515
<div class="login-page">
1616
<div class="form">
17-
<h1 data-testid="page-title">
17+
<h1>
1818
Login
1919
</h1>
2020
<div class="login-form">
2121
<!-- FormコンポーネントはデフォルトでhandleSubmitを使用して、submitイベントを処理します。 -->
2222
<!-- そのため、submitイベント発火時に全項目のバリデーションチェックが同時に実行されます。 -->
2323
<!-- 詳細はこちらのhandleSubmitをご参照ください https://vee-validate.logaretm.com/v4/api/form/#slots -->
24-
<Form v-slot="{ meta, isSubmitting }" data-testid="validation-form" @submit="submit">
24+
<Form
25+
v-slot="{ meta, isSubmitting }"
26+
@submit="submit"
27+
>
2528
<div class="field">
2629
<Field
2730
rules="required|email"
@@ -30,9 +33,12 @@ const submit = (values: Record<string, any>) => {
3033
type="text"
3134
class="form-text"
3235
placeholder="email"
33-
data-testid="input-email"
3436
/>
35-
<ErrorMessage name="email" class="message invalid" data-testid="email-error-msg" />
37+
<ErrorMessage
38+
name="email"
39+
data-testid="email-error-msg"
40+
class="message invalid"
41+
/>
3642
</div>
3743
<div class="field">
3844
<Field
@@ -42,19 +48,22 @@ const submit = (values: Record<string, any>) => {
4248
type="text"
4349
class="form-text"
4450
placeholder="password"
45-
data-testid="input-password"
4651
/>
47-
<ErrorMessage name="password" class="message invalid" data-testid="password-error-msg" />
52+
<ErrorMessage
53+
name="password"
54+
data-testid="password-error-msg"
55+
class="message invalid"
56+
/>
4857
</div>
4958
<div class="field">
5059
<!-- フォームの送信処理が実行中の場合は, isSubmittingはtrueを返す -->
5160
<!-- すべての項目に有効な値が入力された場合は、meta.validはtrueを返す -->
5261
<!-- 詳細に関してはこちらを参照ください https://vee-validate.logaretm.com/v4/api/use-form/#api-reference -->
5362
<button
5463
:disabled="isSubmitting || !meta.valid"
55-
:class="{ 'btn-disabled' : isSubmitting || !meta.valid}"
56-
class="form-submit"
64+
:class="{ 'btn-disabled': isSubmitting || !meta.valid }"
5765
data-testid="submit-btn"
66+
class="form-submit"
5867
>
5968
Submit
6069
</button>
@@ -86,10 +95,12 @@ const submit = (values: Record<string, any>) => {
8695
padding: 15px;
8796
width: 100%;
8897
}
98+
8999
.form .form-submit.btn-disabled {
90100
background: #858585;
91101
cursor: not-allowed;
92102
}
103+
93104
.form .form-submit {
94105
background: #000000;
95106
border: 0;
@@ -100,6 +111,7 @@ const submit = (values: Record<string, any>) => {
100111
padding: 15px;
101112
width: 100%;
102113
}
114+
103115
.form button:hover,.form button:active,.form button:focus {
104116
background: #2a2a2a;
105117
}

‎src/pages/formScript.vue‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,23 @@ const store = useUserStore()
88
const { handleSubmit, errors, isSubmitting, meta } = useForm({
99
validationSchema: {
1010
email: 'required|email',
11-
password: 'required'
12-
}
11+
password: 'required',
12+
},
1313
})
1414
15-
const { value: password } = useField('password')
16-
const { value: email } = useField('email')
15+
const { value: password } = useField<string>('password')
16+
const { value: email } = useField<string>('email')
1717
18-
const submit = handleSubmit(() => {
19-
store.setUserInfo(email.value as string, password.value as string)
20-
router.push('/myPage')
18+
const submit = handleSubmit(async () => {
19+
store.setUserInfo(email.value, password.value)
20+
await router.push('/myPage')
2121
})
2222
</script>
2323

2424
<template>
2525
<div class="login-page">
2626
<div class="form">
27-
<h1 data-testid="page-title">
27+
<h1>
2828
Login
2929
</h1>
3030
<div class="login-form">
@@ -35,9 +35,12 @@ const submit = handleSubmit(() => {
3535
type="text"
3636
name="email"
3737
placeholder="email"
38-
data-testid="input-email"
3938
>
40-
<span v-if="errors.email" class="message invalid" data-testid="email-error-msg">{{ errors.email }}</span>
39+
<span
40+
v-if="errors.email"
41+
data-testid="email-error-msg"
42+
class="message invalid"
43+
>{{ errors.email }}</span>
4144
</div>
4245
<div class="field">
4346
<input
@@ -46,19 +49,22 @@ const submit = handleSubmit(() => {
4649
type="text"
4750
name="password"
4851
placeholder="password"
49-
data-testid="input-password"
5052
>
51-
<span v-if="errors.password" class="message invalid" data-testid="password-error-msg">{{ errors.password }}</span>
53+
<span
54+
v-if="errors.password"
55+
data-testid="password-error-msg"
56+
class="message invalid"
57+
>{{ errors.password }}</span>
5258
</div>
5359
<div class="field">
5460
<!-- フォームの送信処理が実行中の場合は, isSubmittingはtrueを返す -->
5561
<!-- すべての項目に有効な値が入力された場合は、meta.validはtrueを返す -->
5662
<!-- 詳細に関してはこちらを参照ください https://vee-validate.logaretm.com/v4/api/use-form/#api-reference -->
5763
<button
5864
:disabled="isSubmitting || !meta.valid"
59-
:class="{ 'btn-disabled' : isSubmitting || !meta.valid}"
60-
class="form-submit"
65+
:class="{ 'btn-disabled': isSubmitting || !meta.valid }"
6166
data-testid="submit-btn"
67+
class="form-submit"
6268
@click="submit"
6369
>
6470
Submit
@@ -90,10 +96,12 @@ const submit = handleSubmit(() => {
9096
padding: 15px;
9197
width: 100%;
9298
}
99+
93100
.form .form-submit.btn-disabled {
94101
background: #858585;
95102
cursor: not-allowed;
96103
}
104+
97105
.form .form-submit {
98106
background: #000000;
99107
border: 0;
@@ -104,6 +112,7 @@ const submit = handleSubmit(() => {
104112
padding: 15px;
105113
width: 100%;
106114
}
115+
107116
.form button:hover,.form button:active,.form button:focus {
108117
background: #2a2a2a;
109118
}

‎src/pages/index.vue‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,29 @@
11
<script lang="ts" setup>
2-
import BaseTextInput from '../components/atoms/BaseTextInput.vue'
2+
import { useFetch } from '@vueuse/core'
3+
34
const text = ref('')
5+
const uuid = ref('')
6+
const handleClick = async () => {
7+
const { data } = await useFetch('https://httpbin.org/uuid').json()
8+
uuid.value = data.value.uuid
9+
}
410
</script>
511

612
<template>
713
<div>
8-
<h1 data-testid="page-title">
14+
<h1>
915
Pages/index.vue
1016
</h1>
11-
<BaseTextInput v-model="text" data-testid="text-input" />
17+
<BaseTextInput
18+
v-model="text"
19+
/>
1220
<p>Input value = {{ text }}</p>
21+
<button
22+
@click="handleClick"
23+
>
24+
Get uuid
25+
</button>
26+
<p>UUID = {{ uuid }}</p>
1327
</div>
1428
</template>
1529

‎src/pages/myPage.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,16 @@ const password = store.user.password
1414
</h1>
1515
<div>
1616
<div class="field">
17-
Email: <span data-testid="page-email" v-text="email" />
17+
Email: <span
18+
data-testid="page-email"
19+
v-text="email"
20+
/>
1821
</div>
1922
<div class="field">
20-
Password: <span data-testid="page-password" v-text="password" />
23+
Password: <span
24+
data-testid="page-password"
25+
v-text="password"
26+
/>
2127
</div>
2228
</div>
2329
</div>

0 commit comments

Comments
 (0)