passing data between components not working

Question

i have been struggling for hours on this one, i am a newbie in vuejs basically i have a modal based on tabs and i want to show some data into the modal-content of my modal, the place where click event of open modal occurs is in another vue file and the place where i want to populate the modal content is in another vue,here's my code

main blade file

@section('main-content')
<div class="full-page-taps">
    <div class="page-head p-4 mb-lg-4">
        <h3>Directory</h3>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <employee-search :inplaceholder="'Search Techs'"></employee-search>
            </div>
        </div>
        <employee-card-section :indata="{{ $employees }}"></employee-card-section>
    </div>
    <modal name="employee-modal"
        :width="'94%'"
        :height="'94%'"
    >
    <employee-modal-content v-on:custom="customHandler"></employee-modal-content>
    </modal>
</div>
@endsection

employeecard.vue

  methods: {
                openEmployee() {

                // if(this.viewEmployees) {

                    this.$modal.show('employee-modal');

// this.$emit("passdata",this.employee.id);
                             this.$emit('chalja');
                            //   this.$emit('custom', 'somedata');
                            //    this.$eventHub.$emit("passdata");
                        // })

                // }

            }
            },

employee-modal-content.vue

<template>
<div>
<div class="secondary-header no-margin">
    <h2>UNEEB</h2>
</div>
<div class="customer-panel">
    <input type="hidden" id="eid" value="" />
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#profile" role="tab">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#bio" role="tab">Bio</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#audit" role="tab">Audit</a>
        </li>
    </ul>
        <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="profile" role="tabpanel">

        </div>
        <div class="tab-pane" id="bio" role="tabpanel">

        </div>
        <div class="tab-pane" id="audit" role="tabpanel">

        </div>
    </div>
</div>
</div>
</template>

<script>

export default {
        methods:{
             customHandler : function(e){
      console.log(e);
      console.log("works");
    }
        },
        mounted(){
         this.$eventHub.$on('chalja', ()=> {
      alert("agya");
      });
        }
    }

</script>

i basically want to pass in the ID from employeecard.vue to directory-modal-content.vue. i have tried many solutions but none worked for me, any help?

thats the problem its not comming from the blade file its comming from one independent component — uneeb meer
– uneeb meer, Commented Jul 3, 2019 at 16:09

Christian Carrillo · Accepted Answer · 2019-07-03 16:30:50Z

0

Should be so:

1.Pass your id as dynamic prop of component

<employee-modal-content :id="employee.id"></employee-modal-content>

2.In your child component u have to use props to receive the id variable

<template>
  <div>
    {{ id }}
  </div>
</template>

<script>
export default {
  props: ['id'],
  methods:{
      //...
  }
}
</script>

answered Jul 3, 2019 at 16:30

Christian Carrillo

2,7612 gold badges11 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

passing data between components not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related