javascript - framework - ¿Cómo se muestran las filas especificadas usando vue js?

framework vue js

Question

Estos son los datos que obtuve de la url. Necesito imprimir solo la segunda y la cuarta fila,

{
"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 se da a continuación. Así es como recupero el valor de la URL correspondiente

 <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>

MI HTML ES

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

Ayúdame a mostrar solo los artículos 2º y 4º []? Soy débil en js. Por lo tanto, será genial para ayudarme

Answer 1

Por segunda y cuarta fila, supongo que quiere decir que los elementos en el índice 1 y 3. La forma más sencilla de hacerlo sería agregar un v-if vincula con la siguiente condición: 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 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://"
}
]
}
});

<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>

Para separar la UI de la lógica, puede usar una calculada para ese propósito. El calculado puede filtrar los valores requeridos como:

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 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://"
}
]
},
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>

Nota: He agregado en el autor de la publicación a la pantalla para que sea más fácil conocer el índice de elementos filtrados.

Actualizar

Según lo sugerido por Bert , el filtro puede mejorarse para:

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 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://"
}
]
},
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>