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

Posted 2023-02-22

【中文标题】如何访问 vue js 列表中的对象元素（nuxt）

【英文标题】：how to access an object element in a vue js list (nuxt)

【发布时间】：2019-01-02 10:52:02

【问题描述】：

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

 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"
        
      />
      <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 ;
  
;

图像数组中的每个对象都应该返回一个 id 和一个 url，所以我想将该 url 作为我的图像中的源，但我有这个错误：无法读取未定义的属性 '0'

似乎我需要对图像数组进行另一个循环，是否有使用 vue JS 的正确方法？

【问题讨论】：

您是否只寻找第一张图片？

是的，我只需要第一张图片的网址

【参考方案1】：

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

您可以尝试添加条件以使渲染不出错

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

在这些情况下，我通常会添加<pre>ip</pre> 以查看发生了什么。

【参考方案2】：

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