來自新聞 API 的 Vue CLI 可點擊動態 url

Question

我正在從 newsapi.org 獲取數據，我希望在標題后有一個可點擊的鏈接，以便您可以閱讀有關該文章的更多信息。 但我不能讓它工作。

也許這對我來說太高級了，因為我不擅長編碼。 我想也許有一種簡單的方法可以使動態 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>

Answer 1

在這種情況下，您可以使用 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 和動態路由的更多信息

Answer 2

因此，據我所知，每個不同的新聞文章都將有一個單獨的網址。 似乎對這些信息將如何傳遞到錨標記、它應該來自哪里以及您如何使用數據存在輕微的誤解。

首先，讓我們解決您的數據方法。 如果您查看數據的結構，您可以看到您有一個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: [],
  }
}

此外，一開始沒有人擅長編碼，只要不斷嘗試了解數據是如何流動的，你就會到達那里！

Answer 3

這條線效果很好！ 謝謝！

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

我也刪除了地址數據。