Question

我有一个这样的对象数组：

{ id: 33617,
  datePublication: 1532266465,
  dateUpdate: 1532266574,
  headline: 'An headline title here',
  images: [ [Object] ] },
{ id: 33614,
  datePublication: 1532265771,
  dateUpdate: 1532271769,
  headline: 'another super headline article',
  images: [ [Object], [Object], [Object], [Object], [Object] ] }

所以我在vue js模板上以这种方式进行迭代：

<v-flex v-for="(ip, i) in ips" :key="i" xs12 sm6 >
    <v-card>
      <v-card-media
        :src="ip.images[0].url"
        height="200px"
      />
      <v-card-title primary-title>
        <div>
          <h3 class="headline mb-0">{{ ip.headline }}</h3>
          <div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
        </div>
      </v-card-title>
      <v-card-actions>
        <v-btn flat color="orange">Share</v-btn>
        <v-btn flat color="orange">Explore</v-btn>
      </v-card-actions>
    </v-card>  
  </v-flex>

这是我关联的脚本：

var api = "https://my api.org/news/fr-FR/2018-25-07";
export default {
data() {
return {};
},
layout: "no-live",
async asyncData({ app }) {
  const ips = await app.$axios.$get(api);
  console.log(ips);
  return { ips };
  }
};

images数组中的每个对象都应返回一个id和一个url，因此我想将该URL用作我的图像中的源，但是我遇到此错误：无法读取未定义的属性“ 0”

似乎我需要对images数组进行另一个循环，是否可以使用vue JS来执行此操作？

Answer 1

如果ips中有任何没有images的对象，则会得到该错误，

您可以尝试添加条件以使渲染没有错误

  <v-card-media
    v-if="ip.images && ip.images[0]"
    :src="ip.images[0].url"
    height="200px"
  />

在这些情况下，我通常添加一个<pre>{{ip}}</pre>来查看发生了什么。

Answer 2

尝试将v-if =“ ip.images”放在v-card-media组件上。您将确保图像不为空并已加载。

如何访问Vue js列表（nuxt）中的对象元素

2 个答案: