제목 수정하기

타이틀이나 세팅 등을 통째로 저장해서 읽어오고 하는 걸 만들것이다.

---

app.vue

app.vue 는 처음에 화면이 시작되는 곳이다.

<!-- menu, title, footer는 처음에 시작할 때 데이터를 가져올 것이다. -->

<! --화면에 넘겨줄 때도 그냥 title이 아니고 site.title 이 된다.
		footer, menu 전부 마찬가지이다. -->
        
      <site-title :title="site.title"></site-title>
      <v-spacer/>
      <v-btn icon @click="save"><v-icon>mdi-check</v-icon></v-btn>
      <v-btn icon @click="read"><v-icon>mdi-numeric</v-icon></v-btn>
      <v-btn icon @click="readOne"><v-icon>mdi-account-badge-alert</v-icon></v-btn>
    </v-app-bar>
    <v-navigation-drawer app v-model="drawer">
      <site-menu :items="site.menu"></site-menu>
    </v-navigation-drawer>
    <v-content>
      <router-view/>
    </v-content>
    <site-footer :footer="site.footer"></site-footer>
  </v-app>
</template>

<script>
import SiteTitle from '@/views/site/title'
import SiteFooter from '@/views/site/footer'
import SiteMenu from '@/views/site/menu'

export default { 
  components: { SiteTitle, SiteFooter, SiteMenu },
  name: 'App',
  data () {
    return {
      drawer: false,
  <!-- 필요한 요소들(menu, title, footer)을 묶어서 간단히 표현하려고 site로 묶는다. -->
      site: {
        menu: [],
        title: '나의 타이틀입니다',
        footer: '푸터입니다'
      }
    }
  },
  <!-- 
  	  시작할때는 크게 두가지가 있다.
          1. mounted () => created 의 반대로 형상이 있을 때 시작한다.

          2. created () => 전체화면에 아무 형상이 없을 때 시작하고 
             여기서는 형상이 없을때도 불러와야 되므로 mounted () 는 없애고 이것만 사용하도록 하자.
             created ()에 직접 만들기보다 메서드를 만든(subscribe())뒤 호출을 하자
             리스너 형태는 에러리스너를 뒤에 붙여야된다. 
   -->
  
  created () {
    this.subscribe()
  },
  methods: {
    subscribe () {
      this.$firebase.database().ref().child('site').on('value', (sn) => {
        const v = sn.val()
        if (!v) {
          this.$firebase.database().ref().child('site').set(this.site)
        }
        this.site = v
      }, (e) => {
        console.log(e.message)
      })
    },

<!-- 생략 --> 
</script>

---

title.vue 

<template>
  <v-toolbar-title>
    {{ title }}
    <v-btn icon @click="openDialog"><v-icon>mdi-grease-pencil</v-icon></v-btn>
    <v-dialog v-model="dialog" max-width="400">
      <v-card>
        <v-card-title>
          제목 수정
          <v-spacer/>
          <v-btn icon @click="save"><v-icon>mdi-content-save</v-icon></v-btn>
          <v-btn icon @click="dialog=false"><v-icon>mdi-close</v-icon></v-btn>
        </v-card-title>
        <v-card-text>
          <!--  @keypress.enter="save" ==> 엔터키를 누르면 save 함수 실행
          		outlined 바깥선을 그려줌
                hide-detail 아웃라인의 아래선을 없애줌.
          -->
          <v-text-field v-model="text" outlined label="제목" @keypress.enter="save" hide-details />
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-toolbar-title>
</template>


<script>
export default {
  props: ['title'],
  data () {
    return {
      dialog: false,
      text: this.title
    }
  },
  methods: {
    openDialog () {
      this.dialog = true
    },
    async save () {
      try {
      	//update 원래 있던 title의 text 데이터를 가져와서 수정만 하는 것.
        await this.$firebase.database().ref().child('site').update({ title: this.text })
      } catch (e) {
        console.log(e.message)
      } finally {
        this.dialog = false
      }
    }
  }
}
</script>