[OP.GG/Spring Framework] Vue.js 홈페이지

롤 전적 검색 OP.GG - 전적 검색, 관전, 리플레이, 챔피언 공략, 카운터, 랭킹

 해당 페이지의 개발자 도구를 보며 vue.js로 비슷하게 따라해보려고합니다.

 

op.gg home

 

 

내 vue의 구조는 App.vue에 Header.vue와 Home.vue를 추가하였다.

Home.vue의 경우 router-view를 사용해서 요청 경로에 따라서 다르게 꾸며주려고 한다. 여기서 Header에 언어를 선택하는 select 상자가 있는데, 해당 값을 App.vue로 가져와 Home.vue에 있는 값을 동적으로 변경해주려고 한다. 내가 선택한 방식은 이벤트 방식이고 방법은 아래와 같다. (이벤트 버스, provide inject 등등 여러 방식이 있었다.)

 

Header.vue

        <select id="select-language" v-model="selectedLanguage" @change="changeLanguage">
        
        methods: {
        changeLanguage() {
            // 선택된 언어에 따라 작업 수행
            if (this.selectedLanguage === 'ko') {
                // 한국어로 변경하는 작업 수행
                document.documentElement.lang = 'ko'; // 페이지의 언어 설정
            } else if (this.selectedLanguage === 'en') {
                // 영어로 변경하는 작업 수행
                document.documentElement.lang = 'en'; // 페이지의 언어 설정
            }
            this.$emit('languageChanged', this.selectedLanguage); // 선택된 언어를 이벤트로 발생
        }
    }

메소드 안에 languageChanged라는 값으로 이벤트를 발생시킨다.

App.vue

<Header @languageChanged="handleLanguageChanged"></Header>

<router-view :language="language"></router-view>

export default {
    data() {
        return {
            language: '소환사명, 소환사명, ...'
        };
    },
    methods: {
        handleLanguageChanged(language) {
            if (language === 'ko') {
                this.language = '소환사명, 소환사명, ...';
            } else if (language === 'en') {
                this.language = 'Summoner name, Summoner name, ...';
            }
        }
    }
}

App.vue 에서는 Header로 부터 값을 가져와서 이벤트가 발생할 시 router-view에 language로 변경된 값을 보내준다.

 

Home.vue

<input type="text"
                                                                                              id="searchHome"
                                                                                              name="search"
                                                                                              autocomplete="off"
                                                                                              v-bind:placeholder="language"
                                                                                              value="">
                                                                                              
export default {
    props: ['language']
};

 Home.vue에서는 받아온 값을 넣어준다.

 

이런식으로 하면 아래와 같이 변경된다.

 

 

비슷하게 구현한 home (한국어)

비슷하게 구현한 home (English)