您好,我在组件中有以下模式:
<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>
但我无法编译此错误:
To avoid scope ambiguity, the default slot should also use syntax when there are other named slots.
我的问题是:
我想通过验证实时禁用“提交”按钮,我也想覆盖vue-bootstrap模态的页脚模态模板。
如果我将 放到 之上,则可以编译,但是不能禁用带有 ValidationObserver的有效插槽的按钮。
我也创建了一个codeSandBox。
https://codesandbox.io/embed/vue-template-o4vkk?fontsize=14
我错了吗?
最佳答案
将整个模式包装在ValidationObserver
中-请参阅working sandbox。这样,您就可以访问ValidationObserver
的页脚位置中的b-modal
提供的作用域 Prop 。
<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>
关于javascript - VueBootstrap和New VeeValidate无法创建自定义模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58289304/