Vue.js 使用 xml 提要

Question

我开始使用 Vue.js 在我的个人网站上工作。现在我突然卡住了。我想在页面上拍摄我的 Jekyll 博客中最新的五个 post。

这就是我查看 http://todayilearned.dk/feed.xml 提要的原因。

但是我不知道如何打印console.log中的三个变量。

我该怎么做？（标题，link 和描述。）

我一直收到这个错误。

data functions should return an object. (found in component: )

  <script>
  var $ = require('jquery');

  export default {
      data: function () {
        $(document).ready(function () {
         var feed = 'http://todayilearned.dk/feed.xml';
         $.ajax(feed, {
           accepts: {
             xml: 'application/rss+xml'
           },
           dataType: 'xml',
           success: function (data) {
             $(data).find('item').each(function () {
               var el = $(this);
               console.log('title      : ' + el.find('title').text());
               console.log('link       : ' + el.find('link').text());
               console.log('description: ' + el.find('description').text());
             });
           }
         });
       });
     }
 };;

完整代码。 https://gist.github.com/mikejakobsen/bbe51bef07ae9cdb113501f9025838c7.pibb

Answer 1

您收到错误是因为无论您在做什么处理，您都应该在 beforeMount 中进行，如下面的

  <script>
  var $ = require('jquery');

  export default {
      data () {
        return {
          title: ''
        }
      },
      beforeMount () {
        var self = this
        $(document).ready(function () {
         var feed = 'http://todayilearned.dk/feed.xml';
         $.ajax(feed, {
           accepts: {
             xml: 'application/rss+xml'
           },
           dataType: 'xml',
           success: function (data) {
             $(data).find('item').each(function () {
               var el = $(this);
               self.title = el.find('title').text()
               console.log('title      : ' + el.find('title').text());
               console.log('link       : ' + el.find('link').text());
               console.log('description: ' + el.find('description').text());
             });
           }
         });
       });
     }
 };

beforeMount 是 vue 提供的众多 Lifecycle Hooks 之一，您可以在其中访问数据、计算属性和方法。您也可以根据需要选择其他挂钩。

data 是你定义 vue 实例变量的地方，它可以在模板中反应使用。

Vue.js 使用 xml 提要

Vue.js working with xml feed

xml

jquery

vue.js

vue-resource

vue-component