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

작성한 질문수 0

0

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

0

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: {} 는 전부 지우셨죠?

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

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

0

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

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

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

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

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

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

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

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

0

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

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

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

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

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

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