我正在从 newsapi.org 获取数据，我希望标题后面有一个可点击的链接，以便您可以阅读有关本文的更多信息。但我无法让它工作。
也许这对我来说太高级了，因为我不擅长编码。我想也许有一种简单的方法可以使动态网址工作。
<template>
<div class="api">
<h1>Latest gossip</h1>
<br />
<div v-for="item of items" v-bind:key="item.id">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
<a v-bind:href="adress">
{{ item.url }}
</a>
</div>
</div>
</template>
我使用公理。
<script>
import axios from "axios";
export default {
name: "Api",
props: ["articles"],
data() {
return {
items: [],
adress: "item.url"
};
},
mounted() {
this.getInfo();
},
methods: {
getInfo() {
axios({
method: "GET",
url:
"https://cors-anywhere.herokuapp.com/https://newsapi.org/v2/top-headlines?country=se&category=entertainment&apiKey=XXX",
dataType: "json",
headers: {
"X-Requested-With": "XMLHttpRequest",
"Access-Control-Allow-Origin": "*"
}
}).then(res => {
/* eslint-disable no-console */
console.log(res.data);
this.items = res.data.articles;
});
}
}
};
</script>
在这种情况下，你可以使用 vue-router。您在路由器/索引中创建带有参数/news/：id 的路由.js例如。
const router = new VueRouter({
routes: [
{ path: '/news/:id', component: SingleNews }
]
})
然后代替
<a href=""/></a>
用
<router-link :to="{ name: 'news', params: { id: news.id }">{{news.headline}}</router-link>
最后，使用
this.$route.params.id
您可以在文档中阅读有关 vue-router 和动态路由的更多信息 https://router.vuejs.org/
因此，据我了解，您将为每篇不同的新闻文章提供一个单独的URL。对于如何将该信息传递到锚标记中、它应该来自何处以及您如何使用数据，似乎存在一些误解。
首先，让我们解决您的数据方法。如果您查看数据的结构，您可以看到您有一个items属性(它是一个数组(和一个设置为 String 的adress属性。
data() {
return {
items: [],
adress: "item.url"
};
},
这里的问题是adress不是动态的。它将始终是文字字符串"item.url"，也就是说，它将始终按该顺序表示这些字符("item.url"(，但它实际上并不表示任何特定项目的url属性。
好消息是，您应该已经在这里看到页面上显示的正确网址：
<a v-bind:href="adress">
{{ item.url }}
</a>
请记住，在这种情况下，锚标记由两部分组成： 1. 我们向用户显示的内容。 2.我们告诉浏览器重定向到的地方。
这里的正确语法(没有 Vue(是这样的：
<a href="https://somelinktogoto.com">
Some text to display
</a>
您目前所说的是："我想要一个锚标签向用户显示项目的 url，并重定向到存储在名为adress的数据属性中的任何内容"。由于adress只存储字符串"item.url"，如果您检查浏览器中生成的html，我会怀疑您的所有锚标签都如下所示：
<a href="item.url">
https://somenewsarticle.com
</a>
幸运的是，这里的修复很简单。由于您已经在使用v-bind，href 可以使用动态信息，或者存储在数据中某处的信息，这些信息可以通过其名称引用。然后，您可以选择向用户显示您想要的任何内容。您还可以从数据中删除adress属性，因为如果所有 url 都包含在items中，则它没有任何用途。
尝试：
<a v-bind:href="item.url" target="_blank">
Read more...
</a>
data() {
return {
items: [],
}
}
此外，一开始没有人擅长编码，只要继续尝试了解数据是如何流动的，你就会到达那里！
这条线效果很好！谢谢！
<a v-bind:href="item.url" target="_blank">Read more here: </a>
我还删除了地址数据。