I'm starting with Vue.js and I can not find a way to run a nested for loop. I'm using it with Django, and what I'm trying to do is show all the elements (a list) that there is in another list (a list of feeds with their respective urls)
This is the template in question feeds.html :
<div>
{% verbatim %}
<div class="mb-2" v-for="feed in feeds">
#{{ index + 1 }}
{{ feeds }}
<div v-if="items.length" v-for="item in items" class="row mb-2">
<div class="card border-light">
<div class="card-body">
<h6 class="card-subtitle mb-2
text-muted">{{ item.published }}</h6>
<h5><a v-bind:href="item.link" class="card-title">{{ item.title }}</a></h5>
{{ item.summary }}
<footer class="blockquote-footer">{{ item.author }}</footer>
</div>
</div>
</div>
feeds is a list where the url that leads to each feed is stored, and items would be the other list that contains all the urls of each feed. So far, it only shows me the urls (items) of the first feed, and repeats it again for the number of items in feeds.
This would be part of app.js
var rssApp = new Vue({
el: '#rss-app',
data: {
items: [],
feeds: [],
newLink: "",
route: "feeds",
},
methods: {
and models.py
class Feed(models.Model):
url = models.URLField(max_length=255, unique=True)
def __repr__(self):
return "<Feed '{}'>".format(self.url)
I would like to go through and show all the elements that are in each feed.
Thank you in advance.