How to display specified rows using vue js?

Question

This is the data I obatined from the url. I need to print only the 2nd and the 4th row,

{
    "status": "ok",
    "source": "n",
    "sortBy": "top",
    "articles": [
        {
            "author": "Bradford ",
            "title": "friends.",
            "url": "http: //",
            "urlToImage": "http://"
        },
        {
            "author": "Bradford  ",
            "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
            "url": "http: //",
            "urlToImage": "http://"
        },
              "author": "Bord  ",
            "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
            "url": "http: //",
            "urlToImage": "http://"
        },
             "author": "Brad  ",
            "title": "Kershaw threw six mesmerizing innings to put L.A. into the Fall Classic.",
            "url": "http: //",
            "urlToImage": "http://"
        }
    ]
}

My vue js script is given below. This is how I retrieve the value from the corresponding url

 <script>
    new Vue({
        el: '#feed' ,
        data: {
        articles: [],
        },
        mounted() {
        this.$nextTick(function() {
          var self = this;
          $.ajax({
                url: "https://newsapi.org/v1/articles?source=espn&sortBy=top&apiKey=4db9d5d381a14ffcbca8e8a9aa8b864c",
                method: "GET",
                dataType: "JSON",
                success: function (e) {
                    if (e.status == 'ok') {
                        self.articles = e.articles;
                        console.log(e.articles)
                    }
                }, error: function(){
                console.log('Error occurred');
                }
            });
        })
        },
       })
</script>

MY HTML IS

<div id="feed">
<div v-for="post in articles" class="mke_">
  <div class="row">
      {{post.title}}
    </div>
</div>
</div>

Please help me to display only the 2nd and 4th articles[]? I am weak in js. So, it will great to help me out

Answer 1

By 2nd and 4th row, I presume you mean that the elements at index 1 and 3. The simplest way of doing so would be to add a v-if binding with the following condition: articles.indexOf(post) == 1 || articles.indexOf(post) == 3 articles.indexOf(post) == 1 || articles.indexOf(post) == 3 .

 new Vue({ el: '#feed', data: { articles: [{ "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bradford ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bord ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Brad ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" } ] } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="feed"> <div v-for="post in articles" v-if="articles.indexOf(post) == 1 || articles.indexOf(post) == 3" class="mke_"> <div class="row"> {{post.title}} <br/> <small>{{post.author}}</small> </div> </div> </div> 

In order to separate the UI from logic, you can use a computed for the purpose. The computed can filter the required values like:

return this.articles.filter(t => 
    this.articles.indexOf(t) == 1 
    || this.articles.indexOf(t) == 3
);

 new Vue({ el: '#feed', data: { articles: [{ "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bradford ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bord ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Brad ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" } ] }, computed: { filteredPosts() { return this.articles.filter(t => this.articles.indexOf(t) == 1 || this.articles.indexOf(t) == 3); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="feed"> <div v-for="post in filteredPosts" class="mke_"> <div class="row"> {{post.title}} <br/> <small>{{post.author}}</small> </div> </div> </div> 

Note: I've added in the post author to the display in order to make it easier to know the index of filtered items.

Update

As suggested by Bert , the filter can be improved to:

return this.articles.filter((t, i) => 
    i == 1 || i == 3
);

 new Vue({ el: '#feed', data: { articles: [{ "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bradford ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Bord ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" }, { "author": "Brad ", "title": "Kershaw threw six mesmerizing innings to put LA into the Fall Classic.", "url": "http: //", "urlToImage": "http://" } ] }, computed: { filteredPosts() { return this.articles.filter((t,i) => i == 1 || i == 3); } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="feed"> <div v-for="post in filteredPosts" class="mke_"> <div class="row"> {{post.title}} <br/> <small>{{post.author}}</small> </div> </div> </div>