Invoking a Modal as a Component with properties #2642
-
|
I am displaying a modal using a SFC component and I dont seem to be able to find the correct mechanism for providing the component with it's required properties before bootstrap-vue-next invokes the modal. I should metion I am using typescript so it;s showing an error in the props: object as it does not expect test Important I have reffered to the help pages on [https://bootstrap-vue-next.github.io/bootstrap-vue-next/docs/composables/useModalController.html] but while it discusses the concept it does not give any details about property binding. If anyone has managed to solve this approach then I would appreciute any pointers, I am in transition from vue2 to vue3 composition API so it's a new approach for me. const {show} = useModalController()
function test() {
show?.({
props:{
test:"Here is a test value",
},
component: ModalTestComponent
})
}<template>
<BModal :show="true" title="Equation Editor" @hide="preventFn" @oncancel="preventFn">
Foobar? editModel is : {{ editModel }} props: [{{ test }}]
</BModal>
</template>
<script setup lang="ts">
import type { BvTriggerableEvent } from 'bootstrap-vue-next';
import { ref } from 'vue';
const preventModal = ref(false)
const preventFn = (e: BvTriggerableEvent) => {
if (preventModal.value) e.preventDefault()
}
const editModel = ref<string | null>(null);
const props = defineProps<{
test: string | null;
}>();
</script> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
I found the answer almost as quick as I posted the question. I needed to using the following h function from vue to invoke the component while passing it the show function, allowing me to set any properties I want too. Works a treat. const {show} = useModalController()
function test() {
show?.({
component: h(ModalTestComponent,{ test:"My value for test"}),
})
} |
Beta Was this translation helpful? Give feedback.
I found the answer almost as quick as I posted the question. I needed to using the following h function from vue to invoke the component while passing it the show function, allowing me to set any properties I want too. Works a treat.