Vue.js如何按索引号从API取数据及解决item.title未定义报错

实现步骤： #

• 提前和接口提供方确认索引号的传参规则，是路径参数还是查询参数，同时确认接口的索引号计数规则（从0开始还是从1开始，避免传参错误）
• 在组件内定义响应式变量存储返回的目标数据、请求状态：
  • Vue2示例：

  export default {
    data() {
      return {
        targetItem: {},
        loading: false
      }
    }
  }
  

  • Vue3示例：

  import { ref } from 'vue'
  const targetItem = ref({})
  const loading = ref(false)
  

• 封装带索引号参数的请求方法，以axios为例：
  • 路径参数接口示例：

  async function fetchItemByIndex(index) {
    loading.value = true
    try {
      const res = await axios.get(`/api/resource/${index}`)
      targetItem.value = res.data
    } catch (err) {
      console.error('数据请求失败：', err)
    } finally {
      loading.value = false
    }
  }
  

  • 查询参数接口示例：

  async function fetchItemByIndex(index) {
    loading.value = true
    try {
      const res = await axios.get('/api/resource', {
        params: { index }
      })
      targetItem.value = res.data
    } catch (err) {
      console.error('数据请求失败：', err)
    } finally {
      loading.value = false
    }
  }
  

• 按业务需求触发请求：比如页面初始化时传入固定索引号调用，或者点击列表项时传入对应索引号调用即可。

排查解决步骤： #

• 检查item的初始值定义：如果item是异步请求返回的数据，初始值如果是空对象或者未定义，渲染时会找不到title属性，可先用可选链兼容写法规避错误：Vue3写{{item?.title}}，Vue2写{{item && item.title}}
• 验证数据结构是否匹配：在接口请求成功的回调中打印console.log(item)，确认item对象下是否存在title属性，是否有嵌套层级（比如实际是item.info.title，层级写错也会找不到属性）
• 检查模板渲染的变量绑定：如果是用v-for遍历列表渲染，要确认遍历的变量命名是否和模板中一致，比如<div v-for="(item, idx) in list" :key="idx">{{item.title}}</div>，如果v-for里的变量命名为val，写item就会报未定义
• 增加渲染条件判断：异步场景下可以加v-if判断item存在后再渲染对应内容，比如<div v-if="item">{{item.title}}</div>，请求未返回时不渲染该节点，即可避免报错。

内容的提问来源于stack exchange，提问作者Tariq