从laravel中的vue组件获取详细信息

时间:2017-05-23 03:24:45

标签: laravel-5 vue.js vuex

Screenshot of my vue components

我有一个Laravel 5.4项目。

我创建了两个组件:Students.vue和Student.vue组件 Students.vue让所有学生和学生获得一个学生展示的标记 这是我的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="#">

                  {{student.name}} {{student.last_name}}

                </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>

当我点击学生姓名时,我想显示学生的所有详细信息。如何实现

1 个答案:

答案 0 :(得分:0)

我认为你有一个关键区别每个学生,因此你可以这样做

if value != nil{}