news.vue

<template>
  <f7-page name="page-news" @page:beforein="onPageBeforeIn" @page:init="onPageInit" stacked>
    <f7-navbar>
        <f7-nav-left>
            <f7-link class="panel-open" open-panel="left" icon="fa fa-bars"></f7-link>
        </f7-nav-left>
        <div class="title" >Noticias</div>
    </f7-navbar>
    <div id="div-news-list" class="list media-list">
      <ul>
        <li v-for="itemNews in news">
          <a class="item-link item-content">
            <div class="item-inner">
                <div class="item-subtitle date-news-list">{{itemNews.pubDate}}</div>
                <div class="item-title-row">
                    <div class="item-title title-news-list">{{itemNews.title}}</div>
                </div>
                <div class="item-subtitle subtitle-news-list">{{itemNews.description}}</div>
            </div>
          </a>
        </li>
      </ul>
    </div>

  </f7-page>
</template>
<script>
    // Import Vue
    import App from '../../../main.vue';

    export default {
    data () {
        return {
        news
        };
    },
    methods: {
        onPageInit:function(){
            //this.getNewsList();
        },
        onPageBeforeIn:function(event)
        {
            event.detail.app.panel.enableSwipe('left');
        },
        getNewsList: function ()
        {
            //AJAX CALL TO GET NEWS
        }
    }
    };
</script>
<style lang="scss" scoped>
    .md .list
    {
        margin-top: 0px;
    }
    .md .media-list .item-media
    {
        height: 80px;
        margin-top: 14px;
        margin-bottom: 14px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
</style>