vue.js list 렌더링

django restapi 

 

views.py

 

folers = serialize('json', folder_list, cls=DjangoJSONEncoder)

result = {}
result['contract'] = ContractSerializer(contract).data
result['folder_list'] = json.loads(folers)
return Response({'code': Code.SUCCESS.value, 'message': Code.SUCCESS.name, 'data': result})

 

 

vue 파일

 

[ { "model": "contract.contractfolder", "pk": 1, "fields": { "cf_foldername": "관리부", "cf_parent": 0, "cf_seq": 1, "cf_sorter": "Y", "cf_deleted": "N", "cf_regdate": "2019-07-08T13:42:11", "cf_userid": 1, "cf_groupid": 1 } }, { "model": "contract.contractfolder", "pk": 2, "fields": { "cf_foldername": "관리1팀", "cf_parent": 1, "cf_seq": 1, "cf_sorter": "Y", "cf_deleted": "N", "cf_regdate": "2019-07-08T13:42:11", "cf_userid": 1, "cf_groupid": 1 } } ]

 

restapi의 return 형태가 json이라 위와 같이 표시된다.

 

 

vue에서는 어쭈고 렌더링 해야 하나......

 

v-for는 안되는것 같다. ==> 간단히 해결되었다

 

 

<div v-if="folder_list.length > 1">
{{ folder_list[0].fields.cf_foldername }}>{{ folder_list[1].fields.cf_foldername }}
</div>
<div v-else>
{{ folder_list[0].fields.cf_foldername }}
</div>