Question

我正在vue中创建一个基本的应用程序，该应用程序使用axios发出get请求以从博客网站获取html数据，并使用cheerio node package来抓取该网站以获取博客标题和发布日期等元素每个博客文章。但是，我在尝试将抓取的元素呈现到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 Code获取指示，该作用域仍在loadBlogs函数之内。我想念什么吗？我非常感谢您的帮助！谢谢！

Answer 1

我认为您的问题是您试图设置jute.maxbuffer数组的 Property ，以使Vue无法选择您的数据更新。相反，您应该从已解析的页面构造新数组并将其设置为results：

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({...})，它甚至应该更简单（但是通常处理整个数组而不是插入和删除它们的一部分会更容易，两者都是可行的解决方案但是在各自的用例中）。

请查看有关how Vue handles reactive updates的本文档文章，其中描述了您遇到的问题。

Vue渲染对象数组

1 个答案: