Login.vue_20211220

<template>
<br />
    <div class="container1">
        <h3>로그인</h3> <hr />

        <!-- {{ userid }} <br />  출력 {{ 모델명 }}
             {{ userpw }} <br /> --> 

        <el-form label-width="80px">
            <el-form-item label="아이디:" style="padding: 5px; text-align:left;">
            <el-input v-model="member.userid" ref="userid1"></el-input>
            </el-form-item>

            <el-form-item label="비밀번호:" style="padding: 5px; text-align:left;">
            <el-input v-model="member.userpw" show-password ref="userpw1"></el-input>
            </el-form-item>

            <el-button type="success" @click="handleLogin">Login</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        // methods = 함수 = 기능 구현
        methods: {
            handleLogin() {
                if(this.userid === ""){
                    alert('아이디를 입력하세요.')
                    this.$refs.userid1.focus();
                    return false;
                }
                if(this.userpw === ""){
                    alert('암호를 입력하세요.')
                    this.$refs.userpw1.focus();
                    return false;
                }
            }
        },
        // 상태변수의 변화를 감지
        watch: {
            member: {
                handler(e) {
                    console.log('watch-member:', e);
                }
            }
        },
        
        //     userid: {
        //         handler(e) {
        //             console.log('watch-userid:', e);
        //         }
        //     },
        //     userpw: {
        //         handler(e) {
        //             console.log('watch-userpw:', e);
        //         }
        //     }
        // },


        // 상태 변수를 바꾸면 화면에 나오는 모양도 바뀐다는 원리를 이용함. 그걸 메소드가 읽어서 바꿔주는거임
        // 상태(state) 변수 설정
        // const id = document.getElementById('userid');
        data() {
            return {
                member : {
                    userid : '',
                    userpw : ''
                }

            }
        }
    }

</script>

<style scoped>
    /* @import '../assets/css/mystyle1.css'; */
</style>