v-for 卡在索引 [0] = 如何正确循环数据

Question

嗨，我正在努力遍历我的数据，我已经按照 vue doc 使用了各种方法，但它似乎只循环了一次，我看不出我哪里出错了，感谢蚂蚁帮助。

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" /> <!--pass href as props to component -->
        
        <p>{{image.href}}</p> <!-- Error Check -->
        {{image}}<!-- This renders the whole data array-->
      </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": "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" }]

提前致谢

Answer 1

最后这是我的错误。检查 vue 开发工具我实际上在数组中嵌套了一个数组，因此要访问它，我需要将图像更改为图像 [0]。

Answer 2

只需在 vue 中添加 data() for more info

正确的代码

let vue = new Vue({
    el: ".home",
    // the data() you forget
  data(){
    return {images: [ 
    { "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" }
    ]}
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

 <div class="home">
    <div v-if="images">    
      
      <div  v-for="image in images" :key="image.href" class="image-div">
        <p>{{image.href}}</p> <!-- Error Check -->
        {{image}}<!-- This renders the whole data array-->
      </div>
    </div>
</div>