Rendering with v-for

Question

I have this html code (I have a script tag in the head that prompts Vue already)

<table class="table-striped" id="productsTable">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Preço</th>
      <th>Descrição</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="product in products">
      <td>
        {{ product.name }}
      </td>
      <td>
        {{ product.value }}
      </td>
      <td>
        {{ product.description }}
      </td>
    </tr>
  </tbody>
</table>
<script>
    var read = require('read-file-utf8');
    var loki = require('lokijs');
    var db = new loki('db.json');
    var data = read(__dirname + "/db.json");
    db.loadJSON(data);
    var products = db.getCollection('products');
    new Vue({
        el: 'body',
        data: {
            products: []
        },
        ready: () => {
            this.products = products.data;
        }
    });
    require('./render.js');
</script>

Can someone tell me why it doesn’t work??

Answer 1

Missing the Tag template

<template>
<table class="table-striped" id="productsTable">
  <thead>
    <tr>
      <th>Nome</th>
      <th>Preço</th>
      <th>Descrição</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="product in products">
      <td>
        {{ product.name }}
      </td>
      <td>
        {{ product.value }}
      </td>
      <td>
        {{ product.description }}
      </td>
    </tr>
  </tbody>
</table>
</template>

Answer 2

Two things:

About reading the JSON:

This code to read the file is server code, it will not work in the browser. The read-file-utf8 is a shortcut to the fs.readFile Node.js and it doesn’t work in the browser. Interestingly, if it worked you might as well have products: products.data inside the object data because that data would already be read...

On how to load data in Vue instance:

The Vue has no ready, uses created (one of the first Hooks to be called) or mounted which is called when the component is added to the DOM.