Programing

Ve-Validate 및 Vue 멀티셀렉트 사용 문제

c10106 2022. 4. 24. 10:22
반응형

Ve-Validate 및 Vue 멀티셀렉트 사용 문제

너희 중 누군가가 나를 도와줄 수 있기를 바라며, 아마도 내가 잘못 생각하고 있는 것일지도 모르지만, 나는 단지 그것을 할 수 없다.Field다중 선택 요소에서 출력을 가져오는 구성 요소.5개의 다른 단계에서 필드 입력을 수신하는 메트로닉8 마법사에서, 나는 이것을 얻으려고 한다.

<Field name="groups" v-slot="{ field }">
    <Multiselect v-bind="field" v-model="groups.value" trackBy="groupName" valueProp="id" label="groupName">
    </Multiselect>
</Field>
<ErrorMessage name="groups" class="fv-plugins-message-container invalid-feedback"></ErrorMessage>

마법사의 ve-validate 양식 데이터에서, 나는 그룹을 기본값[]으로 이 필드가 전달할 배열로 선언하였다.설정 함수에서 저장소에 디스패치된 작업을 통해 다중 선택 항목에 대한 옵션을 얻기 위한 기본값을 정의하고 있다.

    setup(){
    const groups = ref({
     mode: 'tags',
     value: [],
     options: [],
     searchable: true,
     createTag: true,
    });

    store.dispatch(Actions.GET_GROUPS)
      .then((data) => {
        console.log(data);
        groups.value.options = data;
      })
      .catch(...);

    return {
     groups,
        };
    }

Field 구성 요소 없이 멀티셀렉트는 잘 작동하고 내 객체 배열을 반환함id. 하지만 내가console.log모든 마법사의 "다음" 버튼의 출력은 어레이가 기본값으로 유지됨

{campaignName: "hello, world", groups: Array(0), ... }

필드가 멀티셀렉트로부터 값을 어떻게 얻는지 잘 모르기 때문에 아래 개체에서 그룹이 비어 있는 것으로 나타날 것으로 예상할 수 있다.그것들을 어떻게 조합할 것인가?논리를 너무 많이 바꾸지 않고서는 더 좋은 방법이 없을까?제발 도와줘, 그리고 시간 내줘서 고마워!

참조URL: https://stackoverflow.com/questions/68221284/problems-using-vee-validates-field-and-vue-multiselect

반응형