ログインフォームを作成しよう

src/views/LoginView.vue

@@ -5,50 +5,19 @@
         <v-card-title class="login-title">Login</v-card-title>
         <v-card-subtitle>ユーザー情報をご入力下さい</v-card-subtitle>
         <v-form ref="form" v-model="valid" lazy-validation>
-          <v-text-field
-            v-model="name"
-            :counter="10"
-            :rules="nameRules"
-            label="Name"
-            required
-          ></v-text-field>
-
           <v-text-field
             v-model="email"
             :rules="emailRules"
             label="E-mail"
             required
           ></v-text-field>
-
-          <v-select
-            v-model="select"
-            :items="items"
-            :rules="[(v) => !!v || 'Item is required']"
-            label="Item"
-            required
-          ></v-select>
-
-          <v-checkbox
-            v-model="checkbox"
-            :rules="[(v) => !!v || 'You must agree to continue!']"
-            label="Do you agree?"
-            required
-          ></v-checkbox>
-
-          <v-btn
-            :disabled="!valid"
-            color="success"
-            class="mr-4"
-            @click="validate"
-          >
-            Validate
-          </v-btn>
-
-          <v-btn color="error" class="mr-4" @click="reset"> Reset Form </v-btn>
-
-          <v-btn color="warning" @click="resetValidation">
-            Reset Validation
-          </v-btn>
+          <v-text-field
+            v-model="password"
+            label="Password"
+            type="password"
+          ></v-text-field>
+          <v-btn color="success" class="login-btn">LOGIN</v-btn>
+          <v-btn>CLEAR</v-btn>
         </v-form>
       </v-card>
     </div>
@@ -59,19 +28,12 @@
 export default {
   data: () => ({
     valid: true,
-    name: "",
-    nameRules: [
-      (v) => !!v || "Name is required",
-      (v) => (v && v.length <= 10) || "Name must be less than 10 characters",
-    ],
     email: "",
     emailRules: [
       (v) => !!v || "E-mail is required",
       (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
     ],
-    select: null,
-    items: ["Item 1", "Item 2", "Item 3", "Item 4"],
-    checkbox: false,
+    password: "",
   }),
 
   methods: {
@@ -100,4 +62,7 @@ export default {
 .login-title {
   display: inline-block;
 }
+.login-btn {
+  margin-right: 20px;
+}
 </style>