VueBootstrap and New VeeValidate can't make custom modal

Question

Hello I have in my component this modal:

    <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>

But I can't compile with this error:

To avoid scope ambiguity, the default slot should also use syntax when there are other named slots.

My problem is that :

I would like disable "submit" button in realtime with validation and also I would like override footer modal template of vue-bootstrap modal.

If I put outisde I can compile, but I can't disabled button with ValidationObserver valid slot. I have create also a codeSandBox.

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

What I'm wrong?

Rory Rory · Accepted Answer · 2020-04-04T21:08:45

Wrap the entire modal in the ValidationObserver - see working sandbox. This way you have access to the scoped props offered by the ValidationObserver in the footer slot of the 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>

VueBootstrap and New VeeValidate can't make custom modal

1 Answers