Vue.js 使用 xml 提要

Posted 2023-02-22

【中文标题】Vue.js 使用 xml 提要

【英文标题】：Vue.js working with xml feed

【发布时间】：2017-04-23 18:08:12

【问题描述】：

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

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

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

我该怎么做？ （标题、链接和说明。）

我不断收到此错误。

数据函数应该返回一个对象。 （在组件中找到：）

  <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

【参考方案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 实例变量的地方，它可以在模板中被动使用。

【讨论】：

谢谢！但是我如何将数据从 beforeMount 挂钩传输到视图？视图在同一个文件中？ gist.github.com/mikejakobsen/…

@MikeJakobsen 我已经用一个样本更新了答案，请检查。