Vue.js使用xml Feed

Question

我開始在我的個人網站上使用Vue.js工作。現在我突然卡住了。我想在頁面上拍攝我的Jekyll博客上最新的5篇文章。

這就是爲什麼我在尋找http://todayilearned.dk/feed.xml飼料。

但我不知道如何打印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

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實例變量的地方，它可以在模板中被動地使用。