如何在Vue项目中仅获取并展示Google Sheet的第一行数据？

你的问题根源：

• 使用v-for="company in state.companies"会遍历整个数组，因此显示所有公司；
• {{ company.Company[0] }}是访问单个公司名称字符串的第一个字符，所以只会得到首字母，并非你需要的“第一行数据”。

以下是几种可行的解决方案：

方案1：直接访问数组第一个元素（最简洁） #

既然只需要第一条数据，无需遍历整个数组，直接通过数组索引[0]获取第一个元素即可，同时添加判断避免异步请求未完成时的报错：

<template>
  <!-- 先判断数组是否有数据，避免初始空数组导致的undefined错误 -->
  <div v-if="state.companies.length > 0">
    <h3>{{ state.companies[0].Company }}</h3>
    <p>裁员日期：{{ state.companies[0].Date }}</p>
    <p>裁员人数：{{ state.companies[0].Employees }}</p>
    <p>母公司：{{ state.companies[0].Parent || "无" }}</p>
  </div>
  <div v-else>数据加载中...</div>
</template>

方案2：用slice限制v-for的循环范围 #

如果需要保留v-for语法（比如后续可能扩展显示多条的需求），可以通过slice(0,1)截取数组的第一个元素，让v-for只执行一次：

<template>
  <div v-for="company in state.companies.slice(0, 1)" :key="company.Layoff_id">
    {{ company.Company }}
    <!-- 其他字段按需添加 -->
  </div>
</template>

注意：将key改为company.Layoff_id更合理，因为Company字段可能存在重复，而Layoff_id是唯一标识。

方案3：在数据拉取时仅保留第一条记录 #

如果业务逻辑不需要保留全部数据，可以在axios回调中直接只存储第一条数据，或者单独维护一个firstCompany变量：

onMounted(() => {    
  const url = 'URL'
  axios.get(url)
    .then((data) => {
      // 保留全部数据的同时，单独存储第一条记录
      state.companies = data.data;
      state.firstCompany = data.data.length > 0 ? data.data[0] : null;

      // 如果不需要全部数据，直接只存第一条：
      // state.companies = data.data.length > 0 ? [data.data[0]] : [];
    })
})

const state = reactive({
  companies: [],
  firstCompany: null // 新增变量存储第一条数据
})

对应模板：

<template>
  <div v-if="state.firstCompany">
    {{ state.firstCompany.Company }}
  </div>
</template>

内容的提问来源于stack exchange，提问作者M. Straw