Problem rendering component in table

[LingoLasse]

I'm trying to create a component for a table row. I'm using vue-resource to fetch data from an API created in Laravel.

My problem is that the table rows are rendered above the table and not in the tbody as expected. If I change the table into an unordered list it works just fine. Any ideas?

Here's my code:

HTML

@extends('layouts.master')

@section('main')
  <h2>Customers</h2>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <userrow v-repeat="customers"></userrow>
    </tbody>
  </table>
@stop

@section('scripts')
  {!! HTML::script('js/users/App.js') !!}
@stop

JS

var Vue = require('vue');
var VueResource = require('vue-resource');
Vue.use(VueResource);

new Vue({
  el: 'body',

  data: {
    customers: [],
  },

  ready: function() {
    this.fetchCustomers()
  },

  methods: {
    fetchCustomers: function() {
      this.$http.get('/api/v1/users', function(customers) {
        this.$set('customers', customers);
      });
    }
  },

  components: {
    'userrow': {
      template: '<tr><td>{{ name }}</td><td>{{ email }}</td><td>{{ city }}</td></tr>',
      replace: true
    }
  }
});

Result

[yyx990803]

It's mentioned in the doc: http://vuejs.org/guide/components.html#Using_Components (scroll down to see the warning section)

Use <tr v-component="userrow">.

[aguegu]

It took me a whole afternoon ...

[KennedyTedesco]

I'm having the same issue using Vue 1.0. I'm doing something like this:

<tbody>
      <tr-item v-for="item in items"></tr-item>
</tbody>

There is no parent component.

@aguegu What do you do to solve this?

[KennedyTedesco]

Well, nevermind: http://vuejs.org/guide/components.html#is_attribute :smile:

[ben-joostens]

Seems that the proposed fix from last year does not work in 1.0. Is there a workaround for the current version?

[gomako]

You would use the is attribute, as mentioned towards the end of this bit http://vuejs.org/guide/components.html#Template-Parsing

i.e. <tr is="my-component"></tr>

[volfgam]

Anyone knows a way to make work v-for inside a vue component? I try a lot of things create use a component inside another component using is="" but not work.

`... template:

\

\ \ \ \ \ \ \ \ \ \

Name	Secund Name

\` trpessoa is another component like: `Vue.component('trpessoa', { template: '{{pessoa.Nome}}{{pessoa.CpfCnpj}}', props: ['pessoa'], replace: true })` Some variables are in portugues, sorry about this.

[mazeeblanke]

please how can i use this "is" attribute, i want my custom component to have template like so

        <news-items inline-template>
                                  <tr class="gradeX" >
                                      <td><input type="checkbox" /></td>
                                      <td>title</td>
                                      <td>description</td>
                                   </tr>
          </news-items>

but i keep getting errors that it must contain only one root element

[dzunik91]

I've got same problem ! @mazeeblanke Did you find a solution for this ?

<tbody>
    <tr is="data-row" v-for="item in items"></tr>
</tbody>

and error:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

[Aymkdn]

It took me a while to find the correct use of is. So I share it here:

<table>
  <tbody>
    <tr is="itemtpl" v-for="item in items" :item="item"></tr>
  </tbody>
</table>
[...]
<script type="text/x-template" id="itemtpl-template">
  <tr>
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
  </tr>
</script>

[vsg24]

I was using Vue.Draggable and the official example for table didn't work. It was like:

<draggable v-model="list" :element="'tbody'">

It didn't work properly. I had to change it to:

<tbody v-model="list" is="draggable" :element="'tbody'">

It works properly now.

[padtes]

@Aymkdn solution worked for me. without tr in template, it gives no error; but prints only the first data item, instead of looping. Thanks,

[benrolfe]

This is the documentation you need to read: https://vuejs.org/v2/guide/components.html#Using-Components

Try:

<tr is="vue-table-row"
  v-for="(row, index) in rows"
  v-bind:row="row"
  v-bind:index="index"
  v-bind:key="row.id"
></tr>