0

I'm using Vue3 with Ant Design Vue and would like create a 'Modal' component that I can reuse throughout the app.

Something very simple like so:

<template>
    <a-button type="primary" @click="showModal">Open</a-button>
    <a-modal v-model="visible" wrap-class-name="full-modal-to-xl">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
    </a-modal>
</template>

<script lang="ts">
import { ref, defineComponent } from "vue";

export default defineComponent({
    setup() {
        const visible = ref(false);

        const showModal = () => {
            visible.value = true;
        };
        return { visible, showModal };
    },
});
</script>

But it simply will not work...(no console log, or error).

It does seem to work when you pass visible as a prop, but I really do not want to do that. This should work just as well...

What am I missing?

EDIT: Solution (but not really a solution) Using the Composition API is not feasible with Ant it seems.

tony19
  • 125,647
  • 18
  • 229
  • 307
Riza Khan
  • 2,712
  • 4
  • 18
  • 42
  • `simply will not work` - what should it do? what does it do instead? "Does not work" tells us nothing – Bravo Feb 25 '22 at 00:10
  • @Bravo Thanks, I added more context and a potential solution – Riza Khan Feb 25 '22 at 00:11
  • Oh, right, so whatever this ant design vue thing is, it's not compatible with vue3 - that's a failing of antdv - does it claim to be compatible? – Bravo Feb 25 '22 at 00:13

1 Answers1

2

The modal's v-model needs to be on its visible prop:

<a-modal v-model:visible="visible">

demo

tony19
  • 125,647
  • 18
  • 229
  • 307