VueBootstrap 및 New VeeValidate에서 사용자 지정 모드를 만들 수 없음

VueBootstrap 및 New VeeValidate에서 사용자 지정 모드를 만들 수 없음

안녕하세요, 제 컴포넌트에는 다음과 같은 모달 기능이 있습니다.

    <b-modal title="title" v-model="modal_show" v-if="modal_show" >
       <ValidationObserver v-slot="{ invalid }">   
          <b-container fluid>
             <ValidationProvider rules="minVal:0.1" v-slot="{ errors, valid }" name="quantità">
                <b-form-input id="quantity" name="quantity"
                    v-model="productEdited.quantity" type="text" 
                    class="form-control" />
                <div class="invalid-feedback d-block">
                   <span>{{errors[0]}}</span>
                </div>
             </ValidationProvider>
          </b-container>
         <template v-slot:modal-footer>
            <b-button class="mt-3 float-right" variant="outline-danger" @click="toggleModal">close</b-button>
            <b-button class="mt-3 float-right" variant="outline-warning"  @click="updateProductInOrder" :disabled="invalid">save</b-button>
         </template>
      </ValidationObserver>
   </b-modal>

그러나 다음 오류로 컴파일할 수 없습니다.

스코프의 애매함을 피하기 위해 다른 이름 있는 슬롯이 있는 경우에도 디폴트슬롯은 구문을 사용해야 합니다.

문제는 다음과 같습니다.

vue-bootstrap modal의 footer modal 템플릿을 덮어쓰고 검증과 함께 실시간으로 "submit" 버튼을 비활성화합니다.

출력하면 컴파일은 가능하지만 ValidationObserver 유효 슬롯의 버튼을 비활성화할 수 없습니다.코드 Sand Box도 만들었습니다.

https://codesandbox.io/embed/vue-template-o4vkk?fontsize=14

내가 뭘 잘못했다고?

모달 전체를 에 랩합니다.ValidationObserver- 작업 샌드박스를 참조하십시오.이 방법을 사용하면, 로부터 제공되고 있는 스코프 소품에 액세스 할 수 있습니다.ValidationObserver의 바닥글 슬롯에b-modal.

<ValidationObserver v-slot="{ invalid }">
    <b-modal title="title" v-model="modal_show" v-if="modal_show" >  
          <b-container fluid>
             <ValidationProvider rules="minVal:0.1" v-slot="{ errors, valid }" name="quantità">
                <b-form-input id="quantity" name="quantity"
                    v-model="productEdited.quantity" type="text" 
                    class="form-control" />
                <div class="invalid-feedback d-block">
                   <span>{{errors[0]}}</span>
                </div>
             </ValidationProvider>
          </b-container>
         <template v-slot:modal-footer>
            <b-button class="mt-3 float-right" variant="outline-danger" @click="toggleModal">close</b-button>
            <b-button class="mt-3 float-right" variant="outline-warning"  @click="updateProductInOrder" :disabled="invalid">save</b-button>
         </template>
   </b-modal>
</ValidationObserver>

언급URL : https://stackoverflow.com/questions/58289304/vuebootstrap-and-new-veevalidate-cant-make-custom-modal