Vue.js xmlフィードを使用しています

Question

私はVue.jsを使用して私の個人的なサイトの作業を始めました。そして今、私は突然立ち往生しています。私は5つの最新の投稿を私のジキルのブログのページに撮影したい。

だからこそ私はhttp://todayilearned.dk/feed.xmlフィードを探しています。

しかし、私はconsole.logに3つの変数を印刷する方法を理解できません。

どうすればよいですか？ （タイトル、リンク、説明）

このエラーは引き続き発生します。

データ関数はオブジェクトを返す必要があります。 （コンポーネントで発見：）

<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

あなたがエラーを取得しているので、何でもあなたが

<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の一つであり、以下のように、あなたはbeforeMountにやるべきことをやっている処理、および方法。また、あなたの要件に基づいて他のフックを選択することもできます。

dataは、テンプレートで反応的に使用できる変数インスタンス変数を定義する場所です。