如何解决如何迭代对象 id 值?在 Vue.js 中
我在本地有一个数据 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 这将是我的下一步...
解决方法
所以你想通过数组中的 id 找到一个对象,那么你可以在 find()
上使用 dataList
dataList.find(item => item.id === 321).title
dataList.find(item => item.id === 321).author.name
dataList.find(item => item.id === 321).author.title
,
我可能误读了这个问题,但我认为您在谈论使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。