<script>
new Vue({
  // instance 생성
  // instance option properties
});
</script>

<v-form ref="form" @submit.prevent="login">
  <v-text-field
    :rules="emailRule"
  />
</v-form>

<script lang="ts">
data: () => ({
  email: "",
  password: "",
  passwordShow: false,
  autoLoginCheckBox: false,
  emailRule: [
    (v) => !!v || "이메일을 입력해주세요.",
    (v) => {
      const replaceV = v.replace(/(\s*)/g, "");
      const pattern =
        /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/;
      return pattern.test(replaceV) || "이메일 형식으로 입력해주세요";
    },
  ],
  passwordRule: [
    (v) => !!v || "비밀번호를 입력해주세요.",
    (v) => {
      const replaceV = v.replace(/(\s*)/g, "");
      return replaceV.length >= 8 || "8자리 이상 입력해주세요.";
    },
  ],
});
</script>

<script>
methods:{
    async login(){
      const validate = this.$refs.form.validate()
      if (validate){
        const email = this.email.replace(/(\s*)/g, '')
        const password = this.password.replace(/(\s*)/g, '')
        await this.$store.dispatch('LOGIN', { email, password, saveLogin:this.autoLoginCheckBox })
      }
    }
  }
</script>

<q-form ref="loginForm" class="q-gutter-md">
    <q-input square filled clearable v-model="user_id" :rules="[user_id_rules]" type="text" label="ID" />
    <q-input square filled clearable v-model="user_pw" :rules="[user_pw_rules]" type="password" label="password" />
</q-form>

:rules="[val => val.length <= item.maxLength || `${item.maxLength}자를 초과했습니다.`]"

:rules="[val => !getNotNullYn(val, item) || '필수로 입력되어야 합니다.'
    , val => { let textLength = getTextLength(val);
          return textLength <= item.maxLength || `${item.maxLength}자를 초과했습니다.`} ]"

<q-form ref="updateForm">
    <q-input
			v-if="item.type === 'text'"
			type="text"
			:rules="[val => !getNotNullYn(val, item) || '필수로 입력되어야 합니다.'
					    , val => { let textLength = getTextLength(val);
							return textLength <= item.maxLength || `${item.maxLength}자를 초과했습니다.`} ]"
			v-model="item.data"
		/>
		<q-input
			v-if="item.type === 'number'"
			type="number"
			:rules="item.maxLength && [val => val.length <= item.maxLength || `${item.maxLength}자를 초과했습니다.`]"
			v-model="item.data"
		/>
    <q-btn label="추가" @click="updateInfo('1', clickedRow)" />
</q-form>

<script setup>
const updateForm = ref(null); // 입력/수정 폼


const updateInfo = async (type, updatedRow) => {
	const valid = await updateForm.value.validate(); // 유효성 검사 결과를 담음

	if (!valid) {
		$q.notify({ color: 'negative', message: '유효한 값이 아닙니다.' });
		return;
	}

	const bmigHeaders = new Headers();
	bmigHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

  // 중략 (Submit 하는 과정)
};
</script>

<template>
  <div>
    <button @click="[method1(), method2()]">클릭 버튼</button>
  </div>
</template>