인프런 커뮤니티 질문&답변

swc9803

작성한 질문수

프로젝트로 배우는 Vue.js 3

vue3로 오면서 methods를 setup으로 바꾸며 헷갈리는 점이 있습니다.

해결된 질문

작성

184

삭제된 글입니다

vuex vuejs 웹앱

답변 4

swc9803

질문자

v-model="form.title" 을 v-model="title"로 고치지 않았네요
고치고 나니 잘 작동합니다 도움주셔서 감사합니다

코지 코더

지식공유자

const title = ref('');
const saveForm = async () => {
    await db.collection('forms').add({
        title: title.value,
    }).then(...)
}

ref를 사용할 경우 위 코드 처럼. ref를 사용하면 .value를 해줘야합니다

const form = reactive({
    title: ''
});
const saveForm = async () => {
    await db.collection('forms').add({
        title: form.title,
    }).then(...)
}

이건 reactive를 사용할때 이런식으로 하시면 될거예요~

코드들은 전부 setup 함수안에 넣고 data() 와 methods: {} 는 전부 지우셨죠?

위에 코드로 문제가 해결이 되면 좋겠네요. 그래도 안되면 다시 질문 올려주세요~

swc9803

질문자

답변 감사합니다.
둘 다 시도해 봤지만 v-model이 전달한 값을 setup에서 읽지 못하네요
제가 백엔드 지식이 부족한가 봅니다.
methods를 setup으로 바꾸는 법은 감을 잡게 되었습니다. 감사합니다.

코지 코더

지식공유자

setup 함수에서 return 해주셨나요?

setup() {
  const title = ref('');
  const saveForm = async () => {
      await db.collection('forms').add({
          title: title.value,
      }).then(...)
  }
  
  return {
    title
  }
}

이렇게 사용할 ref를 return에 넣어주셔야 template에서 사용하실수가 있어요~

swc9803

질문자

강의를 보고 학습할 때에는 json을 사용했지만

전부 학습한 후에는 다른 것을 사용해 서버를 열어보고 싶어 구글의 파이어스토어를 쓰는 중입니다.

파이어스토어는 강의 하신 내용과는 관련이 없어 답변하시기 곤란하실 것 같아 일부만 질문 드렸습니다.

이전 질문을 다시 말하자면 아래 코드에서

methods: { 를 setup () {으로 바꾼다고 할 때 this를 쓰지 말아야 하기 때문에

await db.collection('forms').add에 있는 title: this.form.title 부분을 title: form.title로 바꾸니 title이 선언되지 않았다는 에러가 뜹니다.

그래서 어떻게 바꿔야 할지 몰라 질문을 드렸습니다.

여기가 백엔드 강의가 아님에도 이런 질문을 드려 죄송합니다.

<template>
<div>
  <h1 class="ml-5">글 작성하기</h1>
  <hr>
  <div class="form">
    <form>
      <label>Title</label>
        <div class="row">
          <div class="col-6">
            <input type="text" v-model="form.title" required>
          </div>
          <div class="col-12">
            <div class="form-group">
              <label>Content</label>
              <textarea v-model="form.content" required></textarea>
            </div>
          </div>
        </div>
    </form>
  <button class="btn btn-primary" @click="saveform">저장</button>
  </div>
</div>
</template>

<script>
import { db } from '@/fdb'
import firebase from 'firebase'

export default {
  data () {
    return {
      form: {
        title: '',
        content: '',
        createdAt: '',
        updatedAt: '',
        uid: '',
        displayName: ''
      }
    }
  },
  methods: {
    async saveform () {
      const uid = firebase.auth().currentUser.uid
      const name = firebase.auth().currentUser.displayName
      const createdAt = new Date()
      const updatedAt = new Date()
        if (this.form.title === '' || this.form.content === '') {
          alert('내용을 입력해주세요!')
        } else {
          await db.collection('forms').add(
            {
              title: this.form.title, content: this.form.content, createdAt, updatedAt, uid, name
            }
          ).then(() => {
            alert('작성 완료!')
            this.form.title = ''
            this.form.content = ''
            this.$router.push({
              name: 'Board'
            })
          }).catch((error) => {
            alert('Error : ' + error.message)
          })
        }
      }
    }
  }
}
</script>

코지 코더

지식공유자

title: form.title 이 부분이 어디서 사용하시는지 잘 모르겠어요~

그런데 setup을 사용할땐 this를 쓰지 않는것은 맞습니다.

아래 처럼 form이라는 reactive를 정의하고 사용하시는건가요?

const form = reactive({title: ''})

지금 작성하고 계신 파일의 코드를 복사해서 올려주시면 한번 살펴보도록 하겠습니다 ^^

그리고 어떤 에러가 났는지도 올려주세요~

swc9803

작성한 질문수

전체 Q&A

질문하기