불타는 키보드

예시 상황 : 점심 메뉴 투표화면 만들기 부모 컴포넌트 : vote-view 자식 컴포넌트 : 선택지 보여주는 option-selector 결과 보여주는 vote-result-viewer 부모 컴포넌트 : vote-view 백엔드로부터 받아왔다고 가정할 정보 title: "점심 골라줘", opts: [ { id: 1, value: "국밥", votes: 1, }, { id: 2, value: "자장면", votes: 2, }, { id: 3, value: "돈가스", votes: 3, }, { id: 4, value: "햄버거", votes: 4, }, ], 선택지를 렌더링할 option-selector에 위 정보를 넘겨줍시다. 결과를 렌더링할 vote-result-viewer에도 넘겨줍니다. 투표를 했..

프레임워크+라이브러리/Vue 2021. 12. 12. 22:53

(깊게 파고들면 기초라 할 수 있을지 모르겠지만 할튼 사용법으로는 기초에 해당할 수 있는 리스트 렌더링 사용법) 점심 메뉴를 고르기 위한 선택지를 만들어봅시다. 전달받은 메뉴 선택지는 아래와 같습니다. opts: ["국밥", "햄버거", "돈가스", "자장면"] 우선 데이터가 아래와 같이 들어온다고 치고, data() { return { opts: ["국밥", "햄버거", "돈가스", "자장면"], }; }, 컴포넌트 이름은 option-selector 라고 하겠습니다. name: "option-selector" 스크립트 영역은 그럼 이렇게 되겠죠. 이제 컴포넌트의 템플릿을 작성해봅시다. 우선 root 태그 하나 만들어주고,, 이 form-group 이라는 div 태그안에 opts array 정보를 담은..

프레임워크+라이브러리/Vue 2021. 12. 12. 18:32