Vue.js Artikel anzeigen

Question

Ich habe eine Komponente in meiner vue.js Anwendung, wo ich einen Benutzer rides zeigen, die er innerhalb einer Woche gemacht hat.

Es sieht wie folgt aus:

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

So ist es funktioniert die Daten angezeigt werden. Aber in meiner Konsole erhalte ich diese Fehler:

Wie könnte ich dies verhindern?

Answer 1

Sets die Fahrt zum leeren Array, statt null

ride: [] 

Oder versuchen v-if-Richtlinie über .row center

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