20.11.22 01:07 작성
·
188
0
안녕하세요 강사님
저는 DOM selector를 이용해 theme color를 변경하는 대신, v-bind를 이용해 theme을 지정해주는 방식을 사용해보았는데 잘 동작하는것 같습니다.
style binding을 이용했을 때에는 코드량이 줄고, theme이 지정된 컴포넌트에 관련 코드가 있어서 조금 더 동작을 파악하기 좋아 보였는데,
혹시 이렇게 작성했을 때 문제가 될 수 있거나 주의해야할 점이 있는지 궁금합니다.
좋은 강의 해주셔서 감사합니다!
<!-- Navbar.vue -->
<template>
<nav class="header" :style="{backgroundColor: navbarColor}">
......
</template>
<script>
export default {
computed: {
...mapState(['navbarColor'])
}
.......
}
</script>
<!-- App.vue -->
<template>
<div id="app">
<Navbar />
<router-view class="container" :style="{backgroundColor: bodyColor}"></router-view>
</div>
</template>
<script>
export default {
.......
computed: {
...mapState([
'bodyColor'
]),
},
updated() {
const body = document.querySelector('body');
if(body) body.style.backgroundColor = this.bodyColor;
},
......
}
</script>