vue.js - Vuejs fetching data from Google Spreadsheet returns nothing

Question

I'm making a simple Vuejs web that gets data from Google Sheet API

I tried the API link and get the right data

but when I applied it to the web, I got nothing

here's the code snippet: https://codesandbox.io/s/upbeat-ardinghelli-g3mog?file=/src/components/HelloWorld.vue

it returns this

Answer 1

I just checked your code on sanbox. You seem to be missing api call on mount.

heres the working code:

<template>
<div class="channeldata">
   <h2>RAW JSON</h2><br>
    <div v-for="question in questions" v-bind:key="question">
        <p>
            {{ question.values }}
        </p>
    </div>
</div>
</template>

<script>
import Vue from "vue";
import axios from "axios";

export default {
    components: {
    },
    mounted() {
        this.getData(this.api.baseUrl)
    },
    data() {
        return {
            questions: [],
            api: {
                baseUrl: "https://sheets.googleapis.com/v4/spreadsheets/1Qa2pQB__fbG2WpzDH0PZSdgkDU6pLIzsIcbvGep5zhk/values:batchGet?ranges=A1%3AE100&valueRenderOption=FORMATTED_VALUE&key=AIzaSyBesotaNgSaTUIhrSKjEaExdi-ksKInhoE",
            },
        };
    },
    methods: {
        getData(apiUrl) {
            axios.get(apiUrl).then((res) => {
                this.questions = res.data.valueRanges;
                console.log(this.questions)
            });
            // .catch(error => console.log(error));
        },
    },
};
</script>

<style lang="scss" scoped>
.channeldata {
    grid-area: CD;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--primary);
    flex: 1;
}

.messages {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 46px - 68px);
    max-height: calc(100vh - 46px - 68px);
    overflow-y: scroll;

    .channelmessage:first-child {
        margin-top: 0;
    }

    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: var(--tertiary);
        border-radius: 4px;
    }

    &::-webkit-scrollbar-track {
        background-color: var(--secondary);
    }
}

.inputwrapper {
    width: 100%;
    padding: 0 16px;
    height: 68px;

    input {
        width: 100%;
        height: 44px;
        padding: 0 10px 0 57px;
        border-radius: 5px;
        color: var(--white);
        background-color: var(--chat-input);
        position: relative;

        &::placeholder {
            color: var(--grey);
        }
    }

    .icon {
        color: var(--grey);
        position: relative;
        top: -50%;
        left: 14px;
        transition: ease-out all 0.2s;
        width: 24px;
    }
}
</style>