Vue Bootstrap 和 New Vuelidate 无法制作自定义模态答案

【问题标题】：VueBootstrap and New VeeValidate can't make custom modalVue Bootstrap 和 New Vuelidate 无法制作自定义模态
【发布时间】：2019-10-08 15:15:07
【问题描述】：

您好，我的组件中有这个模态：

    <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 valid 插槽的按钮。我还创建了一个 codeSandBox。

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

我错了吗？

【问题讨论】：

你能解决这个问题吗？

标签： javascript vuejs2 vee-validate

【解决方案1】：

在ValidationObserver 中包裹整个模态 - 请参阅working sandbox。这样您就可以访问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>

【讨论】：