Mypage.vue

<template>
    <div>
        <h4>마이페이지</h4>

        <el-card shadow="always">
            <el-tabs :tab-position="tabPosition" style="height: 200px">
                <el-tab-pane label="정보수정">
                    <el-form :inline="true" class="demo-form-inline" style="margin-bottom:-20px">
                        <el-form-item label="이름" label-width="120px">
                            <el-input v-model="member.username" ref="username" 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.useremail" ref="useremail" size="mini" placeholder="이메일"></el-input>
                        </el-form-item>
                        <el-form-item >@</el-form-item>
                        <el-form-item >
                            <el-select v-model="member.useremail1" 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-button type="primary" size="mini" @click="nameChange">수정하기</el-button>
                </el-tab-pane>
                <el-tab-pane label="비밀번호변경">( 현재비번, 바꿀비번2번)</el-tab-pane>
                <el-tab-pane label="회원탈퇴">(현재비번)</el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
    export default {
        methods:{
            async nameChange(){
                const url = '주소';

                // 벡엔드에서 token 검증
                const headers = {
                    "Content-Type":"application/json",
                    "TOKEN": this.token
                };

                const body = {
                    username : this.member.username,
                    useremail : this.member.useremail+"@"+this.member.useremail1,
                };
                //get(조회), post(추가), put(수정), delete(삭제)
                //조회 : await this.axios.get(url, {headers:headers});
                //추가 : await this.axios.post(url, body, {headers:headers});
                //수정 : await this.axios.put(url, body, {headers:headers});
                //삭제 : await this.axios.delete(url, {headers:headers, data:{}});

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

        created(){
            console.log('created');
        },

        data() {
            return {
                tabPosition: 'left',

                member : {
                    username   : '',
                    useremail  : '',
                    useremail1 : '',
                },

                token : sessionStorage.getItem("TOKEN"),
            }
        },
    }
</script>

<style scoped>

</style>