Frond-end/Vue
[vue3] 글 수정 페이지 구현하기 (computed() 사용)
Nellie Kim
2024. 4. 1. 10:24
728x90
등록.vue 페이지
//🎈 1. 수정용으로 데이터를 받는 변수 선언
const dietDataPut = route.query // 여기서 라우팅하며 보낸 수정용 데이터를 받는다.
//🎈 2. 사용자가 input박스에 숫자를 입력할 때, testFlag 에 따라서 수정인지, 등록인지 if 분기문을 탄다.
async function changeDietData() {
console.log('testFlag🧧', testFlag.value)
console.log('dietDataPut :::: ', dietDataPut)
// 등록 시 필요한 object 만들기
if (testFlag.value === 'CREATE') {
console.log('selectedFoodInfo를 잘 받아오나 보자~~~~~등록시🍀🍀🍀🍀', selectedFoodInfo.value)
console.log('intakeGram 얼마나 먹었나요????~~~~~등록시🍀🍀🍀🍀', intakeGram.value)
console.log('등록을 시작한다 👍')
dietDataForPost = {
patientId: 108, // todo 하드코딩 수정 필요
foodName: selectedFoodInfo.value?.DESC_KOR,
calorie: intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT1) / 100),
weightInGrams: Number(intakeGram.value),
servingWt: Number(selectedFoodInfo.value?.SERVING_WT),
carbohydrates: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT2) / 100)),
protein: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT3) / 100)),
fat: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT4) / 100)),
sugar: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT5) / 100)),
sodium: Math.round(intakeGram.value * (Number(selectedFoodInfo.value?.NUTR_CONT6) / 100)),
foodInfoDto: selectedFoodInfo.value
} as DietModel
} else {
console.log('수정을 시작한다 👍')
await fetchDetailFoodInfo(selectedFood?.value?.idx as number)
}
console.log('dietDataForPost로 이제 데이터 post 할 준비~~~~~!!!', dietDataForPost)
}
/** 🎈 3. 식이 데이터를 저장 or 수정하는 함수 */
async function addDietData() {
let response
if (!dietDataForPost) return
// 수정용 데이터가 없으면(일반등록) post, 수정용데이터가 있으면(수정) update 함수 실행
if (!dietDataPut.foodName) {
response = await addDiet(dietDataForPost as DietModel)
console.log('👏👏👏👏👏 식이 POST 함수 실행')
} else {
response = await updateDietList(dietDataForPost as DietModel)
console.log('👏👏👏👏👏 식이 UPDATE 함수 실행')
}
if (response.code !== RETURN_CODE.SUCCESS) {
console.log('정보를 가져오는 중 오류가 발생했습니다.')
return
}
tokenError(response.code)
router.replace(`/homeCare/diet/dashboard`)
console.log('response 등록/수정까지 완료 !!!!!', response)
}
//🎈 4. 🎯 항상 감시하는 함수인 computed함수를 사용하여, 수정인지 등록인지 구분해준다.
// dietDataPut.idx가 있으면 수정으로, 아니면 등록.
// (원래는 'dietDataPut'이 있으면 => 이렇게 했는데, 빈객체로 항상 있어서 그냥 idx까지 확인해준것..
const testFlag = computed(() => {
return dietDataPut.idx ? 'MODIFY' : 'CREATE'
})
</script>
요약
computed()로 항상 감시하는 함수를 만들어서, 해당 변수가 있으면 → 수정, 아니면 등록 ! 이런식으로 판별하자.