1

Meu código não esta renderizando a lista produtos definidas pelo vue. Quando retiro o template <pd> pra fora da tabela ele renderiza, procurei por soluções e vi que na propria documentão do vuejs há uma resalva com a tag table Ressalvas na Análise do Template DOM, mas não consegui entender como usar o v-for nesse caso, alguem poderia me ajudar a corrigir o problema?
Abaixo se encontra o código.

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

2

EDIT: Alterei a resposta para ficar mais de acordo com a documentação do vue.

Existem duas formas: Envolvendo em uma tag <template> que é uma tag válida dentro de uma tbody e utilizando o atributo is (recomendado).

Fonte: https://br.vuejs.org/v2/guide/components.html#Ressalvas-na-Analise-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>

3
  • 1
    Oi Luiz, podes explicar porque é que envolvendo num <template> já funciona?
    – Sergio
    Commented 13/06/2019 às 18:07
  • 2
    melhorei a explicação.
    – Guto
    Commented 13/06/2019 às 18:32
  • 1
    Valew, estava com dificuldades, tentei usar o is mas estava usando de maneira errada. Obrigado pela resposta. Commented 13/06/2019 às 19:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .