Vue.js组件不接收道具

Question

我想乘车去看演出模式。当有人点击按钮show时，会弹出一个模态，其中包含乘坐信息。

<table class="table">
    <thead>
        <tr>
            <th>Door</th>
            <th>Van</th>
            <th>Naar</th>
            <th>Type</th>
            <th>Datum</th>
        </tr>
    </thead>
    <tbody>  
        <tr v-for="ride in rides">
          <show-ride-modal :ride="ride"></show-ride-modal>
          <td>{{ ride.user.name }}</td>
          <td>{{ ride.location.from }}</td>
          <td>{{ ride.location.to }}</td>
          <td>{{ ride.type.name }}</td>
          <td>{{ ride.date }}</td>
          <td>
              <a @click="show" class="btn-show">show</a>
              <a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
              <a v-link="{ name: 'ritten' }" class="btn-delete">Remove</a>
          </td>
      </tr>  
    </tbody>             
  </table>

我的show ride modal component：

<template>
<modal title="Bekijk rit">
  <form class="Modal__form" @submit.prevent="createTopic">
    <p>test</p>
    <p>{{ ride.user.name }}</p>
  </form>
</modal>
</template>

<script>

import Modal from './Modal.vue'

export default {

  components: { Modal },

  props: ['ride'],

  data () {
    return {
      showLoader: false
    }
  }
}
</script>

问题是乘坐没有传递给<show-ride-modal>。可能有什么不对？