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.

Если я поставлю outisde , я могу скомпилировать, но не могу отключить кнопку с допустимым слотом ValidationObserver. Я также создал codeSandBox.

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

В чем я ошибаюсь?


javascript vuejs2 vee-validate
person LorenzoBerti    schedule 08.10.2019    source источник
comment
Удалось ли вам решить эту проблему?   -  person CoderSpinoza    schedule 19.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

Оберните весь модальный файл в 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>
person Rory    schedule 04.04.2020