Vue.js 3中如何用v-for递增索引展示Axios获取的API搜索结果

你的核心问题是v-for循环逻辑错误，API返回的bestMatches是一个对象数组，每个数组元素就是单个匹配项，无需额外通过i索引访问属性。以下是修正方案：

步骤1：确保数据正确赋值 #

Axios请求后，需将API响应里的bestMatches数组赋值给组件的results变量：

// 示例Axios请求代码
import axios from 'axios';

export default {
  data() {
    return {
      results: []
    };
  },
  methods: {
    fetchResults() {
      axios.get('你的API接口地址')
        .then(res => {
          this.results = res.data.bestMatches; // 直接取bestMatches数组
        })
        .catch(err => console.error(err));
    }
  }
};

步骤2：修正模板中的v-for循环 #

直接遍历results数组，每个元素就是单个匹配对象，直接访问其属性即可：

<!-- 仅当数组有内容时渲染 -->
<div v-if="results.length" v-for="(item, idx) in results" :key="item['1. symbol']"> 
    <a :href="`/${item['1. symbol']}`">
        {{ item['1. symbol'] }} -- {{ item['2. name'] }}
    </a>
</div>

关键说明 #

• 无需手动维护i变量：v-for会自动遍历数组，item就是当前循环的匹配对象，直接通过item['键名']访问属性即可
• 绑定唯一:key：用item['1. symbol']作为key比索引更稳定，因为symbol是唯一标识
• 简化URL拼接：使用ES6模板字符串:/${item['1. symbol']}``比字符串拼接更清晰
• 优化判断逻辑：用results.length替代v-if="results"，避免数组为空时误渲染

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