Vue.js显示项目

Question

我的vue.js应用程序中有一个组件，其中向用户展示了他一周内完成的rides 。

看起来像这样：

<template>
  <div class="row center">
    <div class="panel ride">
      <div class="ride-title bar-underline">
        <div class="ride-item-title">
          <strong class="ride-item-title-body">Rit van 04-04-2016</strong>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Naam</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.user.name }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Locatie van</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.from }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Locatie naar</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.from }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Uren</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.hour }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Google maps</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.maps }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Gemaakt op</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.created_at }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Factureerbare tijd</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.billabletime }}</p>
        </div>
      </div>
    </div>
  </div>            
</template>

<script>

import swal from 'sweetalert';
import RideService from '../../services/RideService';

export default {

  data () {
    return {
      ride: null
    }
  },

  route: {
  data ({ to }) {
      return RideService.show(this.$route.params.rideId)
        .then(function(data) 
        {
          this.ride = data.data.ride;
        }.bind(this));
    }
  }
}       
</script>

这样就可以显示数据了。 但是在我的控制台中，我收到以下错误：

我该如何预防？

Answer 1

将行程设置为空数组，而不是null

ride: []

或者尝试在.row center上添加v-if指令

<div class="row center" v-if="ride">
   <!-- other stuff-->
</div>