Vue CLI 可点击动态 url 来自新闻 API
Vue CLI clickable dynamic url from a news API
我正在从 newsapi.org 获取数据,我希望在标题后有一个可点击的 link,以便您可以阅读有关该文章的更多信息。但我无法让它发挥作用。
也许这对我来说太高级了,因为我不擅长编码。我想也许有一种简单的方法可以使动态 url 起作用。
<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>
我用的是axios
<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。您在 router/index.js eg.
中创建一个带有参数 /news/:id 的路由
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>
最后,使用
在 SingleNews.vue 组件中检索参数
this.$route.params.id
您可以在文档中阅读有关 vue-router 和动态路由的更多信息 https://router.vuejs.org/
据我了解,每篇不同的新闻文章都将有一个单独的 url。似乎对该信息将如何传递到锚标记、信息应来自何处以及您如何使用数据存在一些误解。
首先,我们来解决您的数据方法。如果查看数据结构,您会发现有一个 items
属性,它是一个数组,还有一个 adress
属性,它被设置为一个字符串.
data() {
return {
items: [],
adress: "item.url"
};
},
这里的问题是 adress
不是动态的。它将始终是文字字符串 "item.url"
,也就是说它将始终按该顺序表示那些字符 ("item.url"
),但它实际上并不表示任何特定项目的 url 属性.
好消息是您应该已经看到正确的 url 显示在您的页面上:
<a v-bind:href="adress">
{{ item.url }}
</a>
请记住,本例中的锚标记有两部分:
1. 我们向用户展示的内容。
2. 我们告诉浏览器重定向到哪里。
这里的正确语法(没有 Vue)应该是这样的:
<a href="https://somelinktogoto.com">
Some text to display
</a>
你目前说的是:"I want an anchor tag to display the item's url to the user and redirect to whatever is stored in the data property called 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>
地址数据我也删了
我正在从 newsapi.org 获取数据,我希望在标题后有一个可点击的 link,以便您可以阅读有关该文章的更多信息。但我无法让它发挥作用。
也许这对我来说太高级了,因为我不擅长编码。我想也许有一种简单的方法可以使动态 url 起作用。
<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>
我用的是axios
<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。您在 router/index.js eg.
中创建一个带有参数 /news/:id 的路由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>
最后,使用
在 SingleNews.vue 组件中检索参数this.$route.params.id
您可以在文档中阅读有关 vue-router 和动态路由的更多信息 https://router.vuejs.org/
据我了解,每篇不同的新闻文章都将有一个单独的 url。似乎对该信息将如何传递到锚标记、信息应来自何处以及您如何使用数据存在一些误解。
首先,我们来解决您的数据方法。如果查看数据结构,您会发现有一个 items
属性,它是一个数组,还有一个 adress
属性,它被设置为一个字符串.
data() {
return {
items: [],
adress: "item.url"
};
},
这里的问题是 adress
不是动态的。它将始终是文字字符串 "item.url"
,也就是说它将始终按该顺序表示那些字符 ("item.url"
),但它实际上并不表示任何特定项目的 url 属性.
好消息是您应该已经看到正确的 url 显示在您的页面上:
<a v-bind:href="adress">
{{ item.url }}
</a>
请记住,本例中的锚标记有两部分: 1. 我们向用户展示的内容。 2. 我们告诉浏览器重定向到哪里。
这里的正确语法(没有 Vue)应该是这样的:
<a href="https://somelinktogoto.com">
Some text to display
</a>
你目前说的是:"I want an anchor tag to display the item's url to the user and redirect to whatever is stored in the data property called 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>
地址数据我也删了