Javascript VueBootstrap和新款VeeValidate can';我不做定制
您好,我的组件中有此模式:Javascript VueBootstrap和新款VeeValidate can';我不做定制,javascript,vuejs2,vee-validate,Javascript,Vuejs2,Vee Validate,您好,我的组件中有此模式: <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="{ err
<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>
{{错误[0]}
关闭
拯救
但我无法编译此错误:
为避免范围模糊,默认插槽也应使用
存在其他命名插槽时的语法
我的问题是:
我想通过验证实时禁用“提交”按钮,还想覆盖vue引导模式的页脚模式模板
如果我将输出为我可以编译,但我不能使用ValidationObserver valid插槽禁用按钮。
我还创建了一个代码沙盒
我错了什么?将整个模式包装在
验证观察服务器中
-请参阅。通过这种方式,您可以访问b-modal
的页脚插槽中的ValidationObserver
提供的作用域道具
<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>
{{错误[0]}
关闭
拯救
您能解决这个问题吗?