Getting details from vue component in laravel

I have a Laravel 5.4 project.

I have created two components : Students.vue and Student.vue component Students.vue get all the students and Student.vue the markup for one display of a student here is my Students.vue

    <template> 

        <div v-if = "students.length && meta">


              <pages :pagination = "meta"></pages>

              <div class = "col-lg-3 col-sm-6 col-md-4 music_genre" v-for = "student in students">

                 <student :student = "student"></student>

              </div>

      </div> 

    </template>

    <script>

    import { mapActions, mapGetters } from 'vuex'

    import eventHub from '../../events.js'


        export default {

            methods: {

                ...mapActions({

                    getStudents: 'student/getStudents'
                })
            },

            computed : {

              ...mapGetters ({

                students : 'student/students',

                meta : 'student/meta'
              })

            },

            mounted() {

               this.getStudents(1)
            }
        }
    </script>

here is my Student.vue

    <template>
      <div class="">

          <div class="team-info ">

              <h4>
                <a href="#">

                   

                </a>

              </h4>

            <span class='team-member-edit'>

              <a href="#"><i class='fa fa-pencil icon-xs'></i></a>

            </span>

          </div>
            <p>Along with studies, is good in all around activities held in the university events.</p>
      </div>
    </template>

    <script>

        export default {

          props:['student'],


            mounted() {


            }
        }
    </script>

When i click on the Student Name, I would like to display all the details of the student. How to achieve that

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2rKjVG9
via IFTTT