Question

我正在制作一个从 Google Sheet API 获取数据的简单 Vuejs 网络

我尝试了 API 链接并获得了正确的数据

但是当我把它应用到网络上时，我什么也没有

这是代码片段：https://codesandbox.io/s/upbeat-ardinghelli-g3mog?file=/src/components/HelloWorld.vue

它返回这个

Answer 1

我刚刚在 sanbox 上检查了您的代码。您似乎缺少挂载时的 api 调用。

这是工作代码：

<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>

Answer 2

您没有在任何地方执行您的 result() 方法。只需添加：

mounted() {
    this.result();
  },

Vuejs 从 Google 电子表格中获取数据不返回任何内容

2 个答案: