Vue.js table component not working

Question

I've made a table and every tbody item is a component like this:

<div class="panel">
    <table class="table">
    <thead>
        <tr>
            <th>Door</th>
            <th>Van</th>
            <th>Naar</th>
            <th>Type</th>
            <th>Datum</th>
        </tr>
    </thead>
    <tbody>
       <ride v-for="ride in rides" :ride="ride"></ride>
    </tbody>
  </table>
</div>

ride:

<template>
<show-ride-modal :ride="ride"></show-ride-modal>
<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">Bekijk</a>
        <a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
        <a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a></td>
</tr>                   
</template>

So I would expect it to look like this:

But it looks like this:

How can I fix this?

Sven · Accepted Answer · 2016-08-04 12:17:22Z

2

Jaimy,

In case you didn't fix your problem yet, please check out the next snippet. I didn't use all your data / modal layouts etc but just a small example to get the table render correctly. I wanted to add the small modification as comment on the answer of Carter, but mny reputation isn't high enough.

The only change to Carter's answer is this: Instead of the repeat on a tr in the tbody, add the v-for on the tbody itself.

Vue.JS docs: In case of a inside of a you should use , as tables are allowed to have multiple tbody:

var ride = Vue.extend({
  props: ['ride'],
  template: `<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">Bekijk</a></td>
              <td><a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a></td>
              <td><a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a></td>
            </tr>`
})

Vue.component('ride', ride)

new Vue({
  el: 'app',
  data: function () {
    return {
      rides: [
        {
          user: {
            name: 'Jaimy' 
          },
          location: {
            from: 'Van',
            to: 'Naar'
          },
          type: {
            name: 'Type'
          },
          date: 'datum'
        },
        {
          user: {
            name: 'Jaimy 2' 
          },
          location: {
            from: 'Van 2',
            to: 'Naar 2'
          },
          type: {
            name: 'Type 2'
          },
          date: 'datum 2'
        }
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<app>
<div class="panel">
    <table class="table">
    <thead>
        <tr>
            <th>Door</th>
            <th>Van</th>
            <th>Naar</th>
            <th>Type</th>
            <th>Datum</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody v-for="ride in rides" is="ride" :ride="ride">
    </tbody>
  </table>
</div>
</app>

answered Aug 4, 2016 at 12:17

Sven

1536 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jamie Over a year ago

Hey, Thanks for the great snippet! When I make my own one in jsfiddle it's working. But for some reason in my project it's not working. (I use version ^1.0.26). It removes the table html. Please see edit 2 for the page source result.

Sven Over a year ago

jamie i cant seem to find your edit. The example above is also using 1.0.26 so I think something else in your project is conflicting

Jamie Over a year ago

Perhaps you could take a look. I have put it on github: github.com/jamie2323/kmstand I would really appreciate that.

Jamie Over a year ago

This is the file: github.com/jamie2323/kmstand/blob/master/resources/assets/js/…

Sven Over a year ago

Jamie just to let you know. I will look into it but im a little short on time right now, so if some1 else has an idea about this please take a look. If not ill try to check it out tomorrow.

|

Carter · Accepted Answer · 2016-08-04 09:58:19Z

2

Quote from official docs: "Vue.js template engine is DOM-based and uses native parser that comes with the browser instead of providing a custom one."

Simply put, you cannot directly use your custom tag <ride> within <tbody>. Instead you have to use <tr> first, and inject your component using is notation.

Try something like this:

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

For more details, please refer to section Template Parsing

Hope this helps!

Update: One more thing: in order to let VueJS have a chance to render variable ride, you have to tell Laravel not to parse it by using @{{}} rather than {{}}, assuming your code is actually a your-view.blade.php

--EDIT--

When I try this:

<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" is="ride" :ride="ride"></tr>
</tbody>

<template>
        <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">Bekijk</a>
            <a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
            <a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a>
        </td>               
</template>

It looks like this:

Update: In the template you need to use <tr></tr> too.

<template>
    <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">Bekijk</a>
            <a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
            <a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a>
        </td>
    </tr>               
</template>

edited Aug 4, 2016 at 9:58

answered Aug 4, 2016 at 7:25

Carter

1,27013 silver badges25 bronze badges

5 Comments

Jamie Over a year ago

Thankyou for answering my question. I've red the documentation but whatever I try, it's not working.

Carter Over a year ago

Can I see where you are up to? Just update the code above.

Carter Over a year ago

And since you tag your question with laravel, I assume you use Laravel blade template system. So note that you have to tell Laravel not to parse your JavaScript variable ride, which means you have to use @{{}} rather than {{}} in your template, like @{{ ride.user.name}}.

Jamie Over a year ago

Please see my edit. I'm making an api in Laravel. So I do not use blade!

Carter Over a year ago

Fair enough.I think you are almost there. In the template you need to use <tr></tr> too. I changed your edit as well, see above code.

Collectives™ on Stack Overflow

Vue.js table component not working

2 Answers 2

8 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related