Untitled

<!DOCTYPE html>
<html lang="es">
  <head>
    <!-- These lines go in the first 1024 bytes -->
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Papu Music Web</title>

    <!-- References -->
    <meta
      name="author"
      content="Siesta Web Designs - siestawebdesigns@gmail.com"
    />
    <meta name="description" content="Papu Music Web" />

    <!-- Configuration -->
    <meta name="keywords" content="HTML CSS JS" />
    <meta name="robots" content="noindex, nofollow" />

    <!-- Viewport Setup for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon" type="image/x-icon" />

    <!-- Style Sheet Links -->
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="css/simple-grid.css" />

    <!-- Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- VueJS -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <!-- Cabecera de la página -->
    <div>
      <header>
        <h1>Papu Music</h1>
        <h2>Espere un poquito...</h2>
      </header>

      <nav id="navegacion">
        <!--Este primer form es el botón home, el resto las opciones-->

        <form>
          <button class="button button5" formaction="/main/index.html">
            Inicio
          </button>
        </form>

        <form>
          <button class="button button5" formaction="/main/tienda.html">
            Tienda
          </button>
        </form>
        <form>
          <button class="button button5" formaction="/main/contacto.html">
            Contacto
          </button>
        </form>
        <form>
          <button class="button button5" formaction="/main/nosotros.html">
            Nosotros
          </button>
        </form>
      </nav>
      <div class="border1">
        <div class="container mt-4" id="app">
          <h3 class="center">Catálogo general de sintetizadores</h3>
          <table>
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Marca</th>
                <th scope="col">Modelo</th>
                <th scope="col">Polifonía</th>
                <th scope="col">VCA</th>
                <th scope="col">Efectos</th>
                <th scope="col">Teclado</th>
                <th scope="col">Memoria</th>
                <th scope="col">Precio</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="sintetizadores, index in sintetizadores">
                <th scope="row">{{ index + 1 }}</th>
                <td>{{ sintetizadores.marca }}</td>
                <td>{{ sintetizadores.modelo }}</td>
                <td>{{ sintetizadores.polifonia }}</td>
                <td>{{ sintetizadores.VCA }}</td>
                <td>{{ sintetizadores.efectos }}</td>
                <td>{{ sintetizadores.teclado }}</td>
                <td>{{ sintetizadores.memoria }}</td>
                <td>{{ sintetizadores.precio }} €</td>
              </tr>
            </tbody>
          </table>
        </div>
        <footer>
          <p>&copy; Siesta Web Designs</p>
          <p>Todos los derechos reservados</p>
          <p>
            <small
              ><a
                class="email"
                href="mailto:siestawebdesigns@gmail.com?subject=Asistencia%20Técnica"
                >siestawebdesigns@gmail.com</a
              ></small>
          </p>
        </footer>
      </div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          sintetizadores: []
        },
        mounted: function() {
          axios
            .get("http://localhost:3000/sintetizadores")
            .then(response => {
              this.sintetizadores = response.data;
              console.log(response);
            })
            .catch(error => {
              console.log(error);
            });
        }
      });
    </script>
  </body>
</html>