Vue рендеринг массива объектов - PullRequest
Новая
       10

Vue рендеринг массива объектов

0 голосов
/ 21 ноября 2018

Я создаю базовое приложение в vue, которое использует axios для создания запроса на получение html-данных с сайта блога и использует пакет cheerio для узла для очистки сайта от таких элементов, как заголовок блога.и дата размещения каждого блога статьи.Тем не менее, у меня возникли проблемы при попытке вывести очищенные элементы в HTML.Вот код: 

<template>
  <div class="card">
    <div 
      v-for="result in results"
      :key="result.id" 
      class="card-body">
      <h5 class="card-title">{{ result.title }}</h5>
      <h6 class="card-subtitle mb-2 text-muted">{{ result.datePosted }}</h6>
    </div>
  </div>
</template>

<script>
const Vue = require('vue')
const axios = require('axios')
const cheerio = require('cheerio')
const URL = 'https://someblogsite.com'

export default {
  data() {
    return {
      results: []
    }
  },
  mounted: function() {
    this.loadBlogs()
  },
  methods: {
    loadBlogs: function() {
      axios
        .get(URL)
        .then(({ data }) => {
          const $ = cheerio.load(data)
          let results = this
          $('.post').each((i, element) => {
            const title = $(element)
              .children('.content-inner')
              .children('.post-header')
              .children('.post-title')
              .children('a')
              .text()
            const datePosted = $(element)
              .children('.content-inner')
              .children('.post-header')
              .children('.post-meta')
              .children('.posted-on')
              .children('a')
              .children('.published')
              .text()
            this.results[i] = {
              id: i + 1,
              title: title,
              datePosted: datePosted
            }
          })
        })
        .catch(console.error)
    }
  }
}
</script>

Я пытался объявить 

let results = this

перед запросом axios, чтобы сослаться на область в экспорте по умолчанию, но все еще получал индикатор из кода VS, что область действияпо-прежнему в функции loadBlogs.Я что-то пропустил?Я очень ценю помощь!Спасибо!

1 Ответ

0 голосов
/ 21 ноября 2018

Я думаю, что ваша проблема в том, что вы пытаетесь установить Свойство массива results, чтобы Vue не мог выбрать обновление ваших данных.Вместо этого вы должны создать новый массив из проанализированной страницы и установить его как this.results = newResultsArray: 

loadBlogs: function() {
    axios.get(URL).then(({data}) => {
        const $ = cheerio.load(data)
        const newResults = $('.post').map((i, element) => {
            const title = $(element).children('.content-inner .post-header .post-title a').text()
            const datePosted = $(element).children('.content-inner .post-header .post-meta .posted-on a .published').text()
            return {
                id: i + 1,
                title: title,
                datePosted: datePosted
            }
        })//.toArray() // this toArray call might be needed, I haven't worked with cheerio for some time and not sure whether it returns array or its own collection type like jQuery does
        this.results = newResults;
    }).catch(console.error)
}

Также это должно быть еще проще, если вы просто используете this.results.push({...}) вместо присвоения свойства this.results[i] = {...} (но этообычно проще обрабатывать целые массивы, а не вставлять и удалять их части, хотя оба являются жизнеспособными решениями в их соответствующих случаях использования.

И, пожалуйста, ознакомьтесь с этой документацией о , как Vue обрабатывает реактивныеобновляет , описывает проблему, с которой вы столкнулись.

...