Vue is not rendering table with v-for, how to solve?

Question

Vue is not rendering table with v-for, how to solve?

Asked 5 years, 5 months ago

Viewed 289 times

1

My code is not rendering the list produtos defined by Vue. When I remove the template <pd> out of the table it renders, I looked for solutions and saw that in the very document of vuejs there is a trace with the tag table Exceptions in the Analysis of the DOM Template, but I couldn’t figure out how to use the v-for in which case, someone could help me fix the problem?
Below is the code.

Vue.component('pd', {
    props: ['nome', 'quantia'],
    template: '<tr><td>{{ nome }}</td><td>{{ quantia }}</td></tr>'
});

var app = new Vue({
    el: '#listaProdutos',
    data: {
        produtos : [
            { id: 0, nome: 'Camisa Regata', quantia: 2},
            { id: 1, nome: 'Bermuda Jeans', quantia: 5},
            { id: 2, nome: 'Casaco Preto', quantia: 1},
        ]
    }

});

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Carrinho de Compra</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
    <div class="container">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Produto</th>
                    <th>Quantia</th>
                </tr>
            </thead>
            <tbody id="listaProdutos">
                <pd
                v-for="item in produtos"
                v-bind:key="item.id"
                v-bind:nome="item.nome"
                v-bind:quantia="item.quantia"></pd>
            </tbody>
        </table>
    </div>
    <script src="./main.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

1 answer

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.

by Guto • **582** points · Answer 1 · 2019-06-13T16:53:31+00:00

EDIT: I changed the answer to be more in line with the Vue documentation.

There are two ways: Involving in a tag <template> which is a valid tag inside a tbody and using the attribute is (recommended).

Source: https://br.vuejs.org/v2/guide/components.html#Disclaimers-na-Parse-do-Template-DOM

Vue.component('pd', {
  props: ['nome', 'quantia'],
  template: '<tr><td>{{ nome }}</td><td>{{ quantia }}</td></tr>'
});

var app = new Vue({
  el: '#listaProdutos',
  data: {
    produtos: [{
        id: 0,
        nome: 'Camisa Regata',
        quantia: 2
      },
      {
        id: 1,
        nome: 'Bermuda Jeans',
        quantia: 5
      },
      {
        id: 2,
        nome: 'Casaco Preto',
        quantia: 1
      },
    ]
  }

});

<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Carrinho de Compra</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
  <div class="container">
    <h3> Com template </h3>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Produto</th>
          <th>Quantia</th>
        </tr>
      </thead>
      <tbody id="listaProdutos">

        <tr v-for="item in produtos" is="pd" :key="item.id" :nome="item.nome" :quantia="item.quantia"></tr>

      </tbody>
    </table>
  </div>

  <script src="./main.js"></script>

</body>

</html>