问题描述
在上面的练习中，我有一个有效的 v-for 循环，它打印 JSON 文件中的所有 JSON 对象，我试图只打印第一个对象而不是整个列表......有办法吗？
- 我在谷歌上找不到答案
这是我的代码：
<template>
<div class="exespotbody">
<div class="grid">
<a v-for="(news,key,index) in news " v-bind:key="news" href="" class="module" 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">
<p> {{ news.description }} </p>
</div>
</a>
<!-- <a class="module" style="display:flex;text-decoration:none;color:#14a0fd; ">
<div>
<img style="height:auto ;width:220px;" src="https://filesforfintech.s3.amazonaws.com/images/pig+sauce/1+Go+to+conference.png">
<p> Events</p>
</div>
</a> -->
</div>
</div>
</template>
<script>
import newsData from "@/static/news.json"
export default {
data() {
return {
news: newsData,}
}
}
</script>
有我不知道的秘密吗？...
Json 文件结构示例：
[{"id":4768,"url":"https://techcrunch.com/2021/01/06/indonesian-robo-advisor-app-bibit-raises-30-million-led-by-sequoia-capital-india/","user_id":48,"restype":"PersonalFinance","description":"Bibit,a Jakarta-based robo-advisor app that wants to make investing more accessible in Indonesia,has raised $30 million from Sequoia Capital India,with participation from returning investors East Ventures,EV Growth,AC Ventures and 500 Startups. – TechCrunch (Catherine Shu)","rating":3,"published_on":"2021-01-06","auth":"","folder":"wealthtech","created_at":"2021-01-07T01:25:41.870-07:00","updated_at":"2021-01-07T01:26:04.530-07:00","header":"Indonesian robo-advisor app Bibit raises $30 million led by Sequoia Capital India","publication":"TechCrunch","sector":"","sector2":"","sector3":"","company_id":2331,"tag_list":[],"company":{"name":"Bibit"}},{"id":4769,"url":"https://www.prnewswire.com/news-releases/leading-commercial-pc-insurance-software-provider-groundspeed-analytics-attracts-investment-from-global-investors-insight-partners-and-oak-hcft-301201761.html","restype":"General","description":"Groundspeed Analytics,the Ann Arbor,Michigan-based commercial P\u0026C insurance software provider,has raised a Series C investment from Insight Partners with participation from existing investor Oak HC/FT. – PR Newswire","rating":1,"folder":"insurtech","created_at":"2021-01-07T01:33:49.371-07:00","updated_at":"2021-01-07T01:34:26.301-07:00","header":"Leading Commercial P\u0026C Insurance Software Provider Groundspeed Analytics Attracts Investment from Global Investors Insight Partners and Oak HC/FT","publication":"PR Newswire","company_id":2332,"company":{"name":"Groundspeed Analytics"}},{"id":4770,"url":"https://www.vccircle.com/ian-leads-pre-series-a-funding-in-fintech-startup-zerone/","description":"Zerone Microsystems,a New Delhi-based provider of an app that converts any smartphone into a payment terminal,has raised $1.3 million in a pre-Series A round,led by Indian Angel Network (IAN) with participation from IAN Fund and The Chennai Angels (TCA). – VCCircle (Joseph Rai)","published_on":"2021-01-05","folder":"payments","created_at":"2021-01-07T02:26:03.980-07:00","updated_at":"2021-01-07T02:26:21.340-07:00","header":"IAN leads pre-Series A funding in fintech startup Zerone","publication":"VCCircle (Joseph Rai)","company_id":2333,"company":{"name":"Zerone Microsystems"}},{"id":4757,"url":"https://www.prnewswire.com/news-releases/color-announces-167-million-in-series-d-financing-to-help-build-public-health-infrastructure-across-the-us-301200310.html","restype":"WealthTech","description":"Color,a San Francisco-based startup that is building public health technology and infrastructure for governments,employers,and other institutions that serve large populations,has raised a $167 million Series D financing round,led by General Catalyst and funds and accounts advised by T. Rowe Price Associates,Inc.,with participation from Viking Global Investors and others,which brings Color to $278 million in total financing,with a valuation of $1.5 billion. – PR Newswire","created_at":"2021-01-05T02:39:51.724-07:00","updated_at":"2021-01-05T03:11:39.856-07:00","header":"Color announces $167 million in Series D financing to help build public health infrastructure across the U.S.","company_id":2321,"company":{"name":"Color"}},{"id":4762,"url":"https://www.uktech.news/news/ondato-funding-expansion-plans-20201231","user_id":null,"restype":"CyberIdentity","description":"Ondato,the Lithuanian identity verification company,has scored $2m in seed capital from Startup Wise Guys and OTB Ventures. The company will be moving its headquarters to London. – UKTN","rating":null,"auth":null,"folder":"regtech","created_at":"2021-01-05T22:25:57.091-07:00","updated_at":"2021-01-05T22:25:57.091-07:00","header":"This is the first tech startup that moved to London after Brexit","publication":"UKTN","sector":null,"sector2":null,"sector3":null,"company_id":1436,"company":{"name":"Ondat0"}},{"id":4755,"url":"https://www.prnewswire.com/news-releases/paid-network-raises-2m-in-funding-led-by-alphabit-fund-and-master-ventures-301200249.html","restype":"Lending","description":"PAID Network,a Toronto-based startup building a decentralized SMART Agreement DApp powered by polkadot,has closed a $2 million funding round led by Alphabit Fund \u0026 Master Ventures,with participation from A195,AU21,Brilliance Ventures,Phoenix VC,and X21. – PR Newswire","rating":2,"published_on":"2021-01-04","folder":"blockchain","created_at":"2021-01-05T02:11:06.437-07:00","updated_at":"2021-01-05T02:11:51.658-07:00","header":"PAID Network Raises $2M in Funding Led by Alphabit Fund and Master Ventures","company_id":2319,"company":{"name":"PAID Network"}},... etc
结果：
解决方法
因此，根据您的数据结构，您的代码应该类似于
<template>
<div class="exespotbody">
<div class="grid">
<!-- Block to print the whole newsList -->
<a v-for="(news,index) in newsList" v-bind:key="news.id" href="" class="module" style="display:flex;text-decoration:none;color:#14a0fd;"> // Change added in v-for
<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">
<p> {{ news.description }} </p>
</div>
</a>
<!-- End of whole newsList -->
<!-- single news Block -->
<a v-bind:key="newsList[0].id" href="" class="module" style="display:flex;text-decoration:none;color:#14a0fd;"> // Change added in v-for
<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">
<p> {{ newsList[0].description }} </p>
</div>
</a>
<!-- End of single news Block -->
<!-- <a class="module" style="display:flex;text-decoration:none;color:#14a0fd; ">
<div>
<img style="height:auto ;width:220px;" src="https://filesforfintech.s3.amazonaws.com/images/pig+sauce/1+Go+to+conference.png">
<p> Events</p>
</div>
</a> -->
</div>
</div>
</template>
<script>
import newsData from "@/static/news.json"
export default {
data() {
return {
newsList: newsData,// change added - to avoid ambiguity in v-for
}
}
}
</script>
由于您的数据结构是 v-for 中的对象数组，因此在迭代时您将无法键入，因为它是一个数组，这就是我删除密钥的原因。