Vue.jsアイテムを表示

Question

私はvue.jsアプリケーションにコンポーネントを持っています。ここでは、ユーザがridesを1週間以内に作成したことを示しています。

それは次のようになります。

<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

は空の配列、代わりのヌル

ride: [] 

それともお返事のための.row center

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