Open modal for add element from child component VueJs

Question

I have a button that should open a modal from a child, that adds a new customer.

It works if I have the code just in parent, but I try to implement this in a child.

Parent

<b-button @click="openModal">Add new customer</b-button>
<add-new-customer ref="modal" v-if="addCustomer"></add-new-customer>

openModal() {
   this.$refs.modal.openModalCh()
},

Child

<b-modal
        id="modal-prevent-closing"
        ref="modal"
        title="Add new customer"
        @ok="addCustomer"
>
...code..
</b-modal>
    <add-new-customer ref="modal" v-if="addCustomer" @added="onAddCustomer"></add-new-customer>
    addCustomer() {
       ..code for post a new customer..
    }
    openModal() {
       this.$refs.modal.openModalCh()
    },

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You can bind $attr to your modal which contains all the attributes passed from the parent to the child. In this case we use it for the ID.

This way you can give the modal an ID in the parent and use that ID to open the modal without a ref.

Parent

<template>
  <div>
      <!-- Use the id that you've given the modal -->
      <b-btn @click="$bvModal.show('add-customer')">Open Modal</b-btn>
      <add-customer-modal id="add-customer" title="add old customer"></add-customer-modal>
  </div>
</template>

<script>
import AddCustomerModal from './components/AddCustomerModal.vue'

export default {
  name: "App",
  components: {
    AddCustomerModal
  }
};
</script>

AddCustomerModal.vue (child)

<template>
  <b-modal
    v-bind="$attrs"
    title="Add new customer"
    @ok="addCustomer"
  ></b-modal>
</template>

<script>
  export default {
    methods: {
      addCustomer() {
        /* Insert logic here */
        console.log('Customer added!')
      }
    }
  }
</script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 4, 2019 at 10:58

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Beusebiu Over a year ago

It opens, but I get error on @ok="addCustomer" , it doesn't get there. I'm looking now, why.

Mickael Lherminez · Accepted Answer · 2019-12-04 09:46:17Z

0

You can solve your problem by injecting your child as a component into your parent. And going through the props for example.

answered Dec 4, 2019 at 9:46

Mickael Lherminez

6951 gold badge11 silver badges30 bronze badges

1 Comment

lokarkristina Over a year ago

Link not working. I feel the right URL is this.

Collectives™ on Stack Overflow

Open modal for add element from child component VueJs

2 Answers 2

Parent

AddCustomerModal.vue (child)

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Parent

AddCustomerModal.vue (child)

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related