Soy nuevo en la codificación. Estoy tratando de hacer un sitio web simple que extraiga los datos de mi hoja de cálculo de Google. Estoy usando Vue.js porque parece razonablemente fácil recorrer mis datos para crear una tabla. Sin embargo, ahora tengo una combinación de código que, sinceramente... no entiendo muy bien... creado por mí al revisar alrededor de 500 tutoriales/respuestas de youtube y stackoverflow.

Pero por alguna razón no puedo obtener los datos para extraerlos de mi hoja de cálculo. Si alguien puede indicarme la dirección correcta sobre qué es exactamente lo que estoy haciendo mal... estaría muy agradecido. =)

 <template> <div class="container"> <tbody> <table style="width:100%"> <tr> <th v-for="header in headers" :key="header">{{ header }}</th> </tr> <tr v-for="row in s" :key="row.a"> <td> {{ row.b}} </td> <td> {{ row.c}} </td> <td> {{ row.d}} </td> <td> {{ row.e}} </td> </tr> </table> <br> <div v-for="item in items" :key="item.value"> <p>{{ item }}</p> </div> </tbody> </div> </template> <style> const { GoogleSpreadsheet } = require('google-spreadsheet'); const creds = require('creds.json'); import { vueGsheets } from 'vue-gsheets' import axios from 'axios'; export default { mixins: [vueGsheets], data() { return { rows:[], api: { baseUrl: "https://sheets.googleapis.com/v4/spreadsheets/spreadsheetId/values:ranges=A!B1:F1?key=<key-here>", "spreadsheetId": '<myid>', get return() { return this.return; }, }, } }, methods: { getData(apiUrl) { axios.get(apiUrl).then((res) => { this.rows = res.data.valueRanges; console.log(this.rows); const { baseUrl } = this.api; }); } } }; </script>