[Vuejs]-Vue shows same ride

by

0👍

Edit: After posting this I learned that Vue.js requires special behavior in the case of tables. See: http://vuejs.org/guide/components.html#Template-Parsing.

It is hard to answer the question if we have to guess what the rest of your code looks like. However, I see some strange things in your code, so maybe if you look at those the issue can be fixed.

Look at this:

<tbody v-for="ride in rides" is="ride" :ride="ride"></tbody>

The ‘is=”ride”‘ attribute and ‘:ride=”ride”‘ parts don’t seem to do anything. ‘is=’ is used in the dynamic component element to assign the component type, and ‘:ride’ could be used to pass props to a component. But you don’t appear to have component.

My suggestion would be change the code to this:

<table class="table" v-if="rides">
    <thead>
      <tr>
            <th>Door</th>
            <th>Van</th>
            <th>Naar</th>
            <th>Type</th>
            <th>Datum</th>
            <th>Acties</th>
        </tr>
    </thead>
    <tbody  v-for="ride in rides" >
       <tr>
        <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>
            <show-ride-modal :ride="ride"></show-ride-modal>
            <a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
            <a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a>
        </td>
    </tr>  
    </tbody>      
  </table>

Leave a comment