我如何使用 v- 打印 1 个对象以获取本地 json 文件
How can i print 1 object using v-for fetching a local json file
在上面的练习中，我有一个工作的 v-for 循环打印我的 JSON 文件中的所有 JSON 对象，我试图只打印第一个对象而不是整个列表...有办法吗？
- 我无法在 google
上找到答案
这是我的代码：
<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 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 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","user_id":48,"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,"published_on":"2021-01-06","auth":"","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","sector":"","sector2":"","sector3":"","company_id":2332,"tag_list":[],"company":{"name":"Groundspeed Analytics"}},{"id":4770,"url":"https://www.vccircle.com/ian-leads-pre-series-a-funding-in-fintech-startup-zerone/","user_id":48,"restype":"General","description":"Zerone Microsystems, a New Delhi-based provider of an app that converts any smartphone into a payment terminal, has raised .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)","rating":3,"published_on":"2021-01-05","auth":"","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)","sector":"","sector2":"","sector3":"","company_id":2333,"tag_list":[],"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","user_id":48,"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 7 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 8 million in total financing, with a valuation of .5 billion. – PR Newswire","rating":1,"published_on":"2021-01-05","auth":"","folder":"insurtech","created_at":"2021-01-05T02:39:51.724-07:00","updated_at":"2021-01-05T03:11:39.856-07:00","header":"Color announces 7 million in Series D financing to help build public health infrastructure across the U.S.","publication":"PR Newswire","sector":"","sector2":"","sector3":"","company_id":2321,"tag_list":[],"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 m in seed capital from Startup Wise Guys and OTB Ventures. The company will be moving its headquarters to London. – UKTN","rating":null,"published_on":"2021-01-05","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,"tag_list":[],"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","user_id":48,"restype":"Lending","description":"PAID Network, a Toronto-based startup building a decentralized SMART Agreement DApp powered by Polkadot, has closed a 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","auth":"","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 M in Funding Led by Alphabit Fund and Master Ventures","publication":"PR Newswire","sector":"","sector2":"","sector3":"","company_id":2319,"tag_list":[],"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 中的一个对象数组，在迭代时您将无法键入，因为它是一个数组，这就是我删除键的原因。
在上面的练习中，我有一个工作的 v-for 循环打印我的 JSON 文件中的所有 JSON 对象，我试图只打印第一个对象而不是整个列表...有办法吗？
- 我无法在 google 上找到答案
这是我的代码：
<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 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 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","user_id":48,"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,"published_on":"2021-01-06","auth":"","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","sector":"","sector2":"","sector3":"","company_id":2332,"tag_list":[],"company":{"name":"Groundspeed Analytics"}},{"id":4770,"url":"https://www.vccircle.com/ian-leads-pre-series-a-funding-in-fintech-startup-zerone/","user_id":48,"restype":"General","description":"Zerone Microsystems, a New Delhi-based provider of an app that converts any smartphone into a payment terminal, has raised .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)","rating":3,"published_on":"2021-01-05","auth":"","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)","sector":"","sector2":"","sector3":"","company_id":2333,"tag_list":[],"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","user_id":48,"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 7 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 8 million in total financing, with a valuation of .5 billion. – PR Newswire","rating":1,"published_on":"2021-01-05","auth":"","folder":"insurtech","created_at":"2021-01-05T02:39:51.724-07:00","updated_at":"2021-01-05T03:11:39.856-07:00","header":"Color announces 7 million in Series D financing to help build public health infrastructure across the U.S.","publication":"PR Newswire","sector":"","sector2":"","sector3":"","company_id":2321,"tag_list":[],"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 m in seed capital from Startup Wise Guys and OTB Ventures. The company will be moving its headquarters to London. – UKTN","rating":null,"published_on":"2021-01-05","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,"tag_list":[],"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","user_id":48,"restype":"Lending","description":"PAID Network, a Toronto-based startup building a decentralized SMART Agreement DApp powered by Polkadot, has closed a 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","auth":"","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 M in Funding Led by Alphabit Fund and Master Ventures","publication":"PR Newswire","sector":"","sector2":"","sector3":"","company_id":2319,"tag_list":[],"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 中的一个对象数组，在迭代时您将无法键入，因为它是一个数组，这就是我删除键的原因。