Vue CLI clickable dynamici c URL из новостного API - PullRequest
Новая
       84

Vue CLI clickable dynamici c URL из новостного API

0 голосов
/ 09 января 2020

Я получаю данные с сайта 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>

Я использую топор ios. 

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

Ответы [ 3 ]

1 голос
/ 09 января 2020

Итак, насколько я понимаю, у вас будет отдельный URL для каждой отдельной новостной статьи. Кажется, что существует небольшое недопонимание того, как эта информация будет передаваться в тег привязки, откуда она должна поступать и как вы используете данные.

Сначала давайте рассмотрим ваш метод данных. Если вы посмотрите на структуру ваших данных, вы увидите, что у вас есть свойство items, которое является массивом, и свойство adress, которое установлено в строку. 

data() {
  return {
    items: [],
    adress: "item.url"
  };
},

Проблема вот что adress не является динамическим c. Это всегда будет буквальная строка "item.url", то есть она всегда будет представлять эти символы ("item.url") в указанном порядке, но на самом деле она не представляет какого-либо определенного свойства url c элемента.

Хорошей новостью является то, что вы уже должны видеть правильный 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 может использовать динамическую c информацию или информацию, которая где-то хранится в ваших данных, на которую можно ссылаться по ее имени. Затем вы можете выбрать для отображения все, что вы хотите для вашего пользователя. Вы также можете удалить ваше свойство adress из данных, поскольку оно не служит никакой цели, если все URL-адреса содержатся в items.

Попробуйте: 

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

data() {
  return {
    items: [],
  }
}

Также поначалу никто не разбирается в кодировании, просто продолжайте пытаться понять, как протекают данные, и вы получите это!

1 голос
/ 09 января 2020

В этом случае вы можете использовать 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>

И, наконец, получите параметр в компоненте SingleNews. vue, используя 

this.$route.params.id

Подробнее о маршрутах vue -router и dynamici c можно прочитать в документации https://router.vuejs.org/

0 голосов
/ 11 января 2020

Эта линия отлично сработала! Спасибо! 

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

Я также удалил данные адреса.

...