Tuesday, 7 September 2021

How can I import DATA variable from js into a new vue component, then print the data in html DOM?

Ok, I re-thought the question, reworked my solution with the help of your answers ich I appreciate a lot! I got to a better solution by accessing the API from Google sheets, now I got the data in a js file I am wondering how can I import the data variable into a file and print it to the HTML DOM ' I am using Vue. '

//importing google api package
const {google} = require('googleapis');
const keys = require('./keys.json')

//https://developers.google.com/sheets/api/quickstart/nodejs
//https://console.cloud.google.com
//https://developers.google.com/identity/protocols/googlescopes

const client = new google.auth.JWT(
  keys.client_email,
  null,
  keys.private_key,
  ['https://www.googleapis.com/auth/spreadsheets']
);
// checking conection to api  we left tokens argument called but we are not using it
client.authorize(function(err/*,tokens*/){
  if(err){
    console.log(err);
    return;
  } else {
    console.log('Connected!');
    //stablishing conection
    gsrun(client);
  }
});

async function gsrun(cl){
  const gsapi = google.sheets({version:'v4', auth: cl });

  const opt = {
    spreadsheetId: '10a44rqtdWcPQqYtBtne0ImmNOaqSuPsiM2YNiTdMiWo', // this is the google sheets id inside the url of the google sheets
    range: 'Data!A1:L93' // this is the data range we are using from hola 1 file in google sheets we san swap to our own sheet tab name
  };

  let data = await gsapi.spreadsheets.values.get(opt);
  console.log(data.data.values);
}

So the let = data has the JSON data I need, its located in ./google-sheets-api.js, but I want to pass it to a Vue3 component and print it as the HTML on a new Vue component like the one below:

<template>
  <div id="sheetsapi">
  <h3>attempt to read data from data from gs sheets api</h3>
  <!-- here is here i want to print my data in i guess a Vue 3 let i in items loop  -->
  </div>

</template>

<script>
 export default {
   name: 'Vue3exp',
 }
 // the data variable is coming from ./google-sheets-api.js
</script>

so far is what I got... I tried some things but since I am new to Vue 3 I ran into a lot of errors hehe :D.



from How can I import DATA variable from js into a new vue component, then print the data in html DOM?

No comments:

Post a Comment