Vue3 챌린지: 양식 편집기

개발자로서 스키마에 정의된 양식을 생성하고 개체를 편집할 수 있는 구성 요소XForm가 필요합니다.

허용 기준

v-model에서 개체를 허용합니다

.

fields 속성

에서 개체 배열을 허용합니다.

<form> 배열

의 길이와 같은 양의 자식 요소로 렌더링fields

필드의 각field은 하위

에 대한 구성을 설명합니다.

field.component는 렌더링해야 하는 구성 요소(또는 태그)의 이름을 가져옵니다(예: input 또는 select 또는 div 등일 수 있음). 기본값: input .

field.field 편집할 v-model 개체의 키 이름 가져오기

field.field 값이 자식

의 name 속성으로 사용됨

다른 모든 속성은 html 속성(예: type , placeholder 등)으로 바인딩됩니다.

입력 값이 변경되면 v-model을 업데이트함

App.vue의

예제가 예상대로 작동합니다.

예시

라고 하자

object = {
  name: 'Alex',
  dateOfBirth: '06.01.1989',
  eyeColor: 'blue',
  bio: 'I love apples'
}

그리고

schema = [
  {
    field: 'name',
    component: 'input',
    type: 'text',
    placeholder: 'Name',
  },
  {
    field: 'dateOfBirth',
    component: 'input',
    type: 'datetime-local' 
  },
  {
    field: 'eyeColor'
  },
  {
    field: 'bio',
    component: 'textarea'
  }
]

주어진 Vue 템플릿은 결과 HTML이 되어야 합니다.

Vue 템플릿

<XForm v-model="object" :fields="schema" />

결과 HTML

<form>
  <input name="name" placeholder="Name" />
  <input name="dateOfBirth" type="datetime-local" />
  <input name="eyeColor" />
  <textarea name="bio" />
</form>

어떻게 제출하나요?

댓글에 "챌린지 수락됨"을 작성합니다.

포크stackblitz project를 만들고 원래 댓글에 대한 답장으로 솔루션이 포함된 새 링크를 보냅니다.

단위 테스트는 있으면 좋지만 선택 사항입니다.

의견에 유용한 기사를 공유하십시오.

그 동안 나는 튜토리얼과 솔루션 작업을 시작할 것입니다. 놓치지 마세요 - 토론을 구독하고 저를 팔로우하세요.

팁

Vuejs를 처음 사용하는 경우 tutorial부터 시작하십시오.