来自新闻 API 的 Vue CLI 可点击动态 URL答案

【问题标题】：Vue CLI clickable dynamic url from a news API来自新闻 API 的 Vue CLI 可点击动态 URL
【发布时间】：2020-04-27 02:20:31
【问题描述】：

我正在从 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>

我用 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>

【问题讨论】：

标签： api url axios vue-cli dynamic-url

【解决方案1】：

因此，据我了解，您将为每篇不同的新闻文章提供一个单独的网址。似乎对这些信息将如何传递到锚标记、它应该来自哪里以及您如何使用数据存在一些误解。

首先，让我们解决您的数据方法。如果您查看数据的结构，您会发现您有一个 items 属性，它是一个数组和一个 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: [],
  }
}

另外，没有人一开始就擅长编码，只要不断尝试了解数据是如何流动的，你就会到达那里！

【讨论】：

【解决方案2】：

在这种情况下，您可以使用 vue-router。您在 router/index.js 中创建一个带有参数 /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

您可以在文档https://router.vuejs.org/中阅读更多关于 vue-router 和动态路由的信息

【讨论】：

【解决方案3】：

这条线效果很好！谢谢！

<a v-bind:href="item.url" target="_blank">Read more here: </a>

我还删除了地址数据。

【讨论】：