Topic: MDBModal as my vue conponent

alexji free asked 1 year ago


I try to create my own vue component based on MDBModal:

<template>
  <MDBModal
    id="exampleModal"
    tabindex="-1"
    labelledby="exampleModalLabel"
    v-model="exampleModal"
  >
    <MDBModalHeader>
      <MDBModalTitle id="exampleModalLabel"> Modal title </MDBModalTitle>
    </MDBModalHeader>
    <MDBModalBody>...</MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" @click="exampleModal = false">Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
</template>

<script>
  name: "MyComponent";
  import {
    MDBModal,
    MDBModalHeader,
    MDBModalTitle,
    MDBModalBody,
    MDBModalFooter,
    MDBBtn,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';
  export default {
    components: {
      MDBModal,
      MDBModalHeader,
      MDBModalTitle,
      MDBModalBody,
      MDBModalFooter,
      MDBBtn,
    },
    props: {
      propExampleModal: {
        type: Boolean,
        default: false,
      },      
    },
    setup() {
      const exampleModal = ref(this.propExampleModal);
      return {
        exampleModal,
      };
    },
  };
</script>

And in App.vue i try to use it:

<template>
  <MDBBtn
    color="primary"
    aria-controls="exampleModal"
    @click="this.dataExampleModal=true"
  >
    Launch demo modal
  </MDBBtn>
  <MyComponent
    :propExampleModal="dataExampleModal"
  >

  </MyComponent>
</template>

<script>
  import {
    MDBBtn,
  } from 'mdb-vue-ui-kit';
  import {
    MyComponent,
  } from '@/components/MyComponent.vue';
  export default {
    components: {
      MDBBtn,
      MyComponent,
    },
    data() {
      return {
        dataExampleModal: false,
      }
    },
  };
</script>

Problem: when I click the Button "Launch demo modal" nothing happens.What I do wrong?


Bartosz Cylwik staff answered 1 year ago


Hi! You have a few problems in your vue app

  1. in app.vue you have to change the imported component to import MyComponent from '@/components/MyComponent.vue'; since MyComponent is not a named export
  2. in app.vue use provide instead of props.
  3. in MyComponent.vue you have to move name: "MyComponent"; under export default
  4. in MyComponent.vue use inject to receive the value that you will change to display the modal

For example:

app.vue - provide the value that is changing on click @click="dataExampleModal = !dataExampleModal"

   setup() {
    const dataExampleModal = ref(false);
    provide("dataExampleModal", dataExampleModal);

    return {
      dataExampleModal,
    };
  },

MyComponent.vue - use it in v-model v-model="dataExampleModal"

  setup() {
    const dataExampleModal = inject("dataExampleModal");

    return {
      dataExampleModal,
    };
  },

After those changes, everything should work fine. Best Regards!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 4.0.0
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No