Vue v-for仅卡索引[0] 如何正确遍历Vuex存储的数组数据

在遍历项目数据时遇到阻碍，参照Vue官方文档尝试了多种实现方式，但v-for似乎仅会执行一次循环，始终无法定位问题原因，寻求对应解决方案。

现有代码实现 #

home.vue 组件代码 #

<template>
  <div class="home">
    <Header />

    <div v-if="images">    
      
      <div v-for="image in images" :key="image.href" class="image-div">
        <ImageWindow :href="image.href" /> <!--将href作为props传递给组件 -->
        
        <p>{{image.href}}</p> <!-- 错误排查用 -->
        {{image}}<!-- 这里可渲染出完整的数组数据 -->
      </div>
    </div>

</template>

<script>
import Header from '@/components/Header.vue'
import ImageWindow from '@/components/ImageWindow.vue'

export default {
  name: 'Home',
  components: {
    Header,
    ImageWindow
  },
  computed: {
    images: function(){
      return this.$store.state.images
    }
  }
</script>

所用图片数据结构 #

当前计划使用的图片原始数据为对象数组格式，单条数据包含render、rel、href三个字段，具体内容如下：

[
  {
    "render": "image",
    "rel": "preview",
    "href": "https://images-assets.nasa.gov/image/PIA12274/PIA12274~thumb.jpg"
  },
  {
    "render": "image",
    "rel": "preview",
    "href": "https://images-assets.nasa.gov/image/PIA02348/PIA02348~thumb.jpg"
  },
  {
    "render": "image",
    "rel": "preview",
    "href": "https://images-assets.nasa.gov/image/GSFC_20171208_Archive_e000590/GSFC_20171208_Archive_e000590~thumb.jpg"
  },
  {
    "render": "image",
    "rel": "preview",
    "href": "https://images-assets.nasa.gov/image/KSC-20170120-PH_AAG01_0001/KSC-20170120-PH_AAG01_0001~thumb.jpg"
  },
  {
    "render": "image",
    "rel": "preview",
    "href": "https://images-assets.nasa.gov/image/PIA17979/PIA17979~thumb.jpg"
  },
  {
    "render": "image",
    "rel": "preview",
    "href": "https://images-assets.nasa.gov/image/PIA17789/PIA17789~thumb.jpg"
  },
  {
    "render": "image",
    "rel": "preview",
    "href": "https://images-assets.nasa.gov/image/PIA21885/PIA21885~thumb.jpg"
  },
  {
    "render": "image",
    "rel": "preview",
    "href": "https://images-assets.nasa.gov/image/PIA12443/PIA12443~thumb.jpg"
  },
  {
    "render": "image",
    "rel": "preview",
    "href": "https://images-assets.nasa.gov/image/PIA07478/PIA07478~thumb.jpg"
  }
]

问题排查与解决方案 #

结合描述的“列表位置可渲染出完整数组数据，但v-for仅执行一次循环”的现象，核心问题基本可以定位为Vuex中state.images的存储结构不符合预期，具体排查和修正要点：

• 确认实际存储的images结构：在computed属性中打印实际获取到的images值，大概率会发现state中存储的是二维数组结构——即外层数组长度为1，内层才是实际的9条图片数据。这种结构下v-for只会遍历外层数组，执行1次循环，循环拿到的image值就是完整的内层图片数组，刚好匹配观察到的渲染现象。
• 修正Vuex的赋值逻辑：检查给state.images赋值的mutation/action代码，常见的错误场景包括：
  • 接口返回数据后，没有做层级拆解就直接赋值，把整个响应对象（或嵌套了多层的数组）塞进了state
  • 赋值时多套了一层数组，比如写法为state.images = [真实图片数组]，人为制造了二维嵌套结构
  • 正确的赋值逻辑应该是state.images = 拆解完成后的一维图片数组，确保v-for遍历的是长度为9的一维数组。
• 补全语法遗漏：核对单文件组件的语法闭合逻辑，当前代码存在两处语法缺失：一是template内最外层div.home标签未正确闭合，二是script中export default导出的配置对象缺少闭合大括号。这类语法错误会触发vue-loader编译异常，直接导致渲染逻辑出错，需要先补全语法再验证渲染效果。

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