vue framework javascript html vue.js vuejs2 vue-component

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



framework vue js (1)

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


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>