VueBootstrap 和 New VeeValidate 无法创建自定义模态

Question

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

<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，我可以编译，但我不能禁用带有验证观察者有效插槽的按钮。 我还创建了一个代码沙盒。

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

我错了什么？

Answer 1

将整个模式包装在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>