mypage/Menu1.vue

<template>
    <div>
        <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
            <el-form-item label="나이" label-width="120px">
                <el-input v-model="member.userage" ref="userage" size="mini" placeholder="이름"></el-input>
            </el-form-item>            
        </el-form>

        <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
            <el-form-item label="이메일" label-width="120px">
                <el-input v-model="member.useremail1" ref="useremail" size="mini" placeholder="이메일"></el-input>
            </el-form-item>
            <el-form-item >@</el-form-item>
            <el-form-item >
                <el-select v-model="member.useremail2" ref="useremail1" size="mini" placeholder="선택">
                    <el-option v-for="tmp in emailOption" :key="tmp" 
                        :label="tmp" :value="tmp"></el-option>
                </el-select>
            </el-form-item>        
        </el-form>
        
        <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
            <el-form-item label=" " label-width="120px">
                <el-button type="primary" size="mini" @click="handleUpdate">수정하기</el-button>
            </el-form-item>            
        </el-form>
        
    </div>
</template>


<script>
    export default {
        created() {
            this.handleData();
        },

        data() {
            return {
                // 로그인 시에 저장했던 TOKEN 정보를 읽음
                token      : sessionStorage.getItem("TOKEN"),
                emailOption: ['naver.com', 'gmail.com', 'daum.net'],
                member     : '',
            }
        },

        methods: {
            async handleData() {

                const url     = `/member/selectone`;
                const headers = { 
                    "Content-Type":"application/json",
                    "token": this.token 
                }
                const response  = await this.axios.get(url, { headers: headers } );
                // console.log(response.data);
                if(response.data.status === 200) {
                    this.member = response.data.result;
                    const tmp   = this.member.useremail.split("@"); // @를 기준으로 나눔.

                    // console.log(tmp); // 골뱅이 기준으로 나눠져서 배열로 됨
                    this.member.useremail1 = tmp[0];
                    this.member.useremail2 = tmp[1];
                }
            },

            async handleUpdate() {
                const url      = `/member/mypage?menu=1`;
                const headers  = { 
                    "Content-Type":"application/json",
                    "token": this.token 
                }

                const body     = {
                    userage  : this.member.userage,
                    useremail: this.member.useremail1 + "@" + this.member.useremail2
                }

                const response = await this.axios.put(url, body, { headers: headers } );
                console.log(response.data);

                if(response.data.status === 200) {
                    // this.member = response.data.result;
                    alert('수정되었습니다');
                    this.handleData();
                }
            }
        }
    }
</script>

<style scoped>

</style>