vue 질문입니다 @vue, @장고, @js
-
학력을 여러 개를 받고 싶어서(고려대 사이버 공학과, 연세 대 컴퓨터 대학원) 모델을 짜다가
여러 개의 데이터 추가 삭제가 안돼서 깃헙 구글링하던중 vue를 사용해 제가 원하는 모양을 발견했습니다. 여기까지는 좋았습니다//
이제 데이터를 생성하고 추가할 수 있게 됐는데 문제는```제가 참고한 깃헙 주인은 데이터의 업데이트나 삭제 부분은 구현을 안해놓으셔서 문제가 생겼습니다 .././/
진짜 4일 연속으로 할만한 건 다했는데 안되네요
혹시 vue 사용자나 다른 사용자 분 중에
제 문제를 봐주시면 안될까요? ㅜㅜㅜ우선 models.py
# # 학력 class Scholar(models.Model): # 학교 클래스 scholar_degree = models.CharField(max_length=10, choices=lawyerChoiceField.DEGREE_CHOICE,default="B", null=True, blank=True) # 학위(석사 박사 학사) scholar_major_name = models.CharField(max_length=50, null=True, blank=True) # 전공명 scholar_name = models.CharField(max_length=50, default="unknown", null=True, blank=True) # 학교 이름 scholar_department = models.CharField(max_length=50, null=True, default="", blank=True,) # 정보 컴퓨터 공학부 scholar_start_year = models.IntegerField(choices=year_day.year, null=True, blank=True) # 입학년도 scholar_end_year = models.IntegerField(null=True, choices=year_day.year, blank=True) # 졸업년도 lawyer = models.ForeignKey(Lawyer, on_delete=models.CASCADE) # start_year 최신으로 순서 정렬 class Meta: ordering = ['-scholar_start_year']
def resume_new(request, resume_id): if request.method == 'POST': lawyer = Lawyer.objects.get(id=resume_id) num1 = 0 scholar_degree = dict(request.POST)['scholar_degree'] # 학위(석사 박사 학사) scholar_major_name = dict(request.POST)['scholar_major_name'] # 전공명 scholar_name = dict(request.POST)['scholar_name'] # 학교 이름 scholar_department = dict(request.POST)['scholar_department'] # 학부 scholar_start_year = dict(request.POST)['scholar_start_year'] # 입학년도 scholar_end_year = dict(request.POST)['scholar_end_year'] # 졸업년도 for e in range(len(scholar_name)): scholar = Scholar.objects.create( lawyer=lawyer, scholar_degree=scholar_degree[num1], scholar_major_name=scholar_major_name[num1], scholar_name=scholar_name[num1], scholar_department=scholar_department[num1], scholar_start_year=scholar_start_year[num1], scholar_end_year=scholar_end_year[num1], ) scholar.save() num1 += 1 return HttpResponseRedirect(reverse('lawyer:detail', args=(lawyer.id,))) # return HttpResponseRedirect(reverse('lawyer:write2', args=(lawyer.id,))) else: return render(request, 'Lawyer_app/resume_write_1.html', {'year': year, 'month': month, 'fee_choice': fee_choice, 'service_choice': service_choice})
html은
<div class="row"> <h4>학력</h4> <div class="normal1" id="bpp"> <table class="table"> <thead> <tr> <td><strong>시작 날짜</strong></td> <td><strong>종료 날짜</strong></td> <td><strong>학교 이름</strong></td> <td><strong>학부</strong></td> <td><strong>전공 이름</strong></td> <td><strong>학력구분</strong></td> <td> <button class="btn btn-primary" @click="addRow2" v-on:submit.prevent>추가하기</button> </td> </tr> </thead> <tbody> <tr v-for="(row,index) in rows" v-bind:key="row.id" v-on:remove="rows.splice(index, 1)"> <td> <select v-model="row.scholar_start_year" name="scholar_start_year" id="scholar_start_year" size="1"> <option value='2019' selected="selected">2019</option> {% for i in year %} <option value='{{i}}'>{{i}}</option> {% endfor %} </select> </td> <td> <select v-model="row.scholar_end_year" name="scholar_end_year" id="scholar_end_year" size="1"><option value='2019' selected="selected">2019</option> {% for i in year %} <option value='{{i}}'>{{i}}</option> {% endfor %} </select> </td> <td><input v-model="row.scholar_name" type="text" name="scholar_name" class="form-control" id="scholar_name" placeholder="학교명을 입력하세요." /></td> <td><input v-model="row.scholar_department" type="text" name="scholar_department" class="form-control" id="scholar_department" placeholder="학부를 입력해주세요." /> </td> <td><input v-model="row.scholar_major_name" type="text" name="scholar_major_name" class="form-control" id="scholar_major_name" placeholder="과를 입력해주세요." /> </td> <td><select v-model="row.scholar_degree" name="scholar_degree" id="scholar_degree" size="1"> <option value='B'>학부</option> <option value='M'>석사</option> <option value='D'>박사</option> <option value='E'>기타 및 없음</option> </select></td> <td> <button class="btn btn-primary" @click="remove2(row,index)" v-on:submit.prevent> Remove </button> </td> </tr> </tbody> </table> </div> </div> <script> window.onload = function () { new Vue({ el: "#bpp", data: { rows: [ { scholar_start_year: "", scholar_end_year: "", scholar_name: "", scholar_major_name: "", scholar_degree: "", scholar_department: "" }, ] }, methods: { addRow2: function (event) { if (event) event.preventDefault(); this.rows.push({ scholar_start_year: "", scholar_end_year: "", scholar_name: "", scholar_major_name: "", scholar_degree: "", scholar_department: "" }); }, remove2: function (row, index) { if (event) event.preventDefault(); this.rows.splice(index, 1) }, } }); </script>
진짜 눈물날 거 같아요././. 제발 도와주세요
제가 원하는 건
1.제가 생성한 데이터를 보이게 하기(-실제 데이터랑 연결 돼야함)
2. 제가 생성한 데이터를 수정하기
3. 제가 생성한 데이터를 삭제하기
4. detail페이지에 갔을 제가 갱신한 데이터를 보게 하기
가 목표입니다 -
@KilJaeeun Goorm 컨테이너 링크를 공유해주시면 더욱 더 자세히 봐드릴수 있을것 같은데 공유가능할까요?
-
안녕하세요. 온라인으로 해야 되는 어려움이 있으니깐, 천천히 해봐요
일단 제가 보기에는 params 들이 각각 여러개를
view.py
로 보내주길 의도하신거 같은데(아래와 같이) 지금 보여주신 코드로는 안될거 같아서{"scholar_name" : {"서울대", "연세대", "고려대"} , }
이렇게 한 번 고쳐볼수 있을까요?
일단 html에 있는
name="~" 이 아이들 뒤에
[]를 붙여봅시다
scholar_degree를
scholar_degree[]` 로
scholar_major_name , scholar_name , scholar_department, scholar_start_year , scholar_end_year
나머지도 다 같은 방식으로그리고
view.py
로 넘어가서똑같이 다
[]
를 붙여주세요그리고 나서
print(dict(request.POST))
를 했을 때 어떤 결과가 나오지는 보여 줄 수 있나요?