如何迭代对象 id 值？在 Vue.js 中

Question

我在本地有一个数据 JSON 文件，我可以在其中将数据放入组件并根据从 0 开始的对象数组编号打印对象值...如何使用对象的 id 值打印它？

以分辨率为例 id=321 我想打印那个对象。

这是我当前按对象数组值打印的工作代码：

<template>
  <div class="exespotbody">
    <center><h2> Stories Spotlight </h2></center><br>
  <div class="Fgrid">

 <!-- single news Block for data-->
<a
   v-bind:key="dataList[0].id"
   :href="`posts/${dataList[0].id}`"
   class="Gmodule"
   style="display:flex;text-decoration:none;color:#14a0fd;"
   >
   <div>
   <!-- <img  src="https://fintechapp.s3.us-east-2.amazonaws.com/y2qYjf8e2hp8z5yrgyfxF2NN?response-content-disposition=inline%3B%20filename%3D%22BoxLogo.png%22%3B%20filename%2A%3DUTF-8%27%27BoxLogo.png&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJG6DG75G7BXQ3XUA%2F20210115%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20210115T192217Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=26b742c676a7fc0854c1efa0c81bf60e9239bc5068606262b3b1eab0f7a21245">
   -->
     <img :src="`{{ dataList[0].logo_url}}`">  </img>
     <h6> {{ dataList[0].title }} </h6>
     <!-- <p v-html="dataList[0].blog_entry"> </p> -->
     <hr>
     <p> {{ dataList[0].author.name }} </p>
     <p> {{ dataList[0].author.title}} </p>
    </div>
</a>
<!-- single news Block for data  END-->
  </div>

  </div>
</template>

<script>
import dataData from "@/data/data.json";
export default {
  name: 'StoriesSpotlight',
  data() {
    return {
      dataList: dataData,
    }
  }
}
</script>

屏幕上的结果：

这是一个用于数据的 Vue 工具图片：

我想要做的是打印对象的 id 绑定的对象的数据，例如 id=321，这将是我的下一步...

Answer 1

所以你想通过它的id从一个数组中找到一个对象，那么你可以在dataList上使用find()

dataList.find(item => item.id === 321).title
dataList.find(item => item.id === 321).author.name
dataList.find(item => item.id === 321).author.title

Answer 2

我可能误读了这个问题，但我认为您是在谈论使用object properties？

如果是这样，只需复制用于显示其他对象属性的行

     <img :src="`{{ dataList[0].logo_url}}`">  </img>
     <h6> {{ dataList[0].title }} </h6>
     <h6> ID: {{ dataList[0].id }} </h6>
     <!-- <p v-html="dataList[0].blog_entry"> </p> -->
     <hr>
     <p> {{ dataList[0].author.name }} </p>
     <p> {{ dataList[0].author.title}} </p>

要遍历完整的dataList，请使用v-for

  <div v-for="entry in dataList" key="entry.id" class="Fgrid">

 <!-- single news Block for data-->
<a
   v-bind:key="entry.id"
   :href="`posts/${entry.id}`"
   class="Gmodule"
   style="display:flex;text-decoration:none;color:#14a0fd;"
   >
   <div>
   <!-- <img  src="https://fintechapp.s3.us-east-2.amazonaws.com/y2qYjf8e2hp8z5yrgyfxF2NN?response-content-disposition=inline%3B%20filename%3D%22BoxLogo.png%22%3B%20filename%2A%3DUTF-8%27%27BoxLogo.png&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJG6DG75G7BXQ3XUA%2F20210115%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Date=20210115T192217Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=26b742c676a7fc0854c1efa0c81bf60e9239bc5068606262b3b1eab0f7a21245">
   -->
     <img :src="`{{ entry.logo_url}}`">  </img>
     <h6> {{ entry.title }} </h6>
     <!-- <p v-html="entry.blog_entry"> </p> -->
     <hr>
     <p> {{ entry.author.name }} </p>
     <p> {{ entry.author.title}} </p>
    </div>
</a>
<!-- single news Block for data  END-->
  </div>