Как использовать v-for и/или v-if для отображения объектов из бэкенда Django Postgres?
Я пытаюсь построить что-то вроде иерархического дерева в Vue3, которое получает данные из бэкенда Django Postgres. Я настроил все модели и отобразил все это во фронтенде, используя Django Rest и Axios. Проблема в том, что он показывает все в каждой ветке моего иерархического дерева, а не только "детей" этой ветки, потому что я не могу понять, как фильтровать данные на основе внешних ключей моих Django моделей. В принципе, в дереве у меня есть 4 Grandparents, каждый с 2 Parents под ними, каждый с 2 Children под ними. Таким образом, в одной ветви дерева должен быть 1 дедушка, затем 2 родителя, затем каждый с 2 детьми. Я могу заставить его показать только каждую ветвь с 1 дедушкой, 4 родителями и 16 детьми. Модели выглядят следующим образом:
class Grandparent(models.Model):
grandparent_id = models.AutoField(primary_key=True)
grandparent_name = models.CharField(max_length=40)
class Parent(models.Model):
parent_id = models.AutoField(primary_key=True)
parent_name = models.CharField(max_length=40)
grandparent_id = models.ForeignKey(Grandparent, on_delete=models.CASCADE)
class Child(models.Model):
child_id = models.AutoField(primary_key=True)
child_name = models.CharField(max_length=40)
parent_id = models.ForeignKey(Parent, on_delete=models.CASCADE)
надеемся, что соответствующие части из моего vue файла выглядят следующим образом:
created () {
this.getGrandparents(),
this.getParents(),
this.getChildren(),
},
data () {
return {
grandparents: [],
parents: [],
children: []
}
},
methods: {
getGrandparents() {
axios({
method: 'get',
url: 'http://ipaddress:port/grandparents/',
auth: {
username: 'username',
password: 'password'
}
}).then(response => this.grandparents = response.data)
},
getParents() {
axios({
method: 'get',
url: 'http://ipaddress:port/parents/',
auth: {
username: 'username',
password: 'password'
}
}).then(response => this.parents = response.data)
},
getChildren() {
axios({
method: 'get',
url: 'http://ipaddress:port/children/',
auth: {
username: 'username',
password: 'password'
}
}).then(response => this.children = response.data)
}
},
С соответствующими HTML частями того же vue файла:
<div class="level-2-wrapper">
<template v-for="grandparent in grandparents" v-bind:key="grandparent.grandparent_id">
<div class="level-2-list">
<div class="level-2 rectangle">{{ grandparent.grandparent_name }}</div>
<div class="level-3-wrapper">
<template v-for="parent in parents" v-bind:key="parent.parent_id">
<div class="level-3-list">
<div v-if="parent.grandparent_id === grandparent.grandparent_id" v-bind:key="parent.parent_id" class="level-3 rectangle">
{{ parent.parent_name }}
</div>
<div class="level-4-wrapper">
<template v-for="child in children" v-bind:key="child.child_id">
<div class="level-4-list">
<div v-if="child.parent_id === parent.parent_id" v-bind:key="child.child_id" class="level-4 rectangle">
{{ child.child_name }}
</div>
</div>
</template>
</div>
</div>
</template>
</div>
</div>
</template>
</div>
Я пытался изменить использование шаблонов и Divs в vue, поскольку именно это используется в документации Vue, но, похоже, это ничего не изменило. Я пробовал менять местами операторы v-for и v-if, но это не дает никакого эффекта или просто не загружает ничего вообще. Я изучил условный рендеринг, но все примеры, похоже, используют статические объекты в файле vue, которые просто содержат такие вещи, как числа, а затем применяют к ним фильтр чисел, чтобы отображать только четные числа, но я не могу заставить что-то подобное работать со ссылкой на ID или что-то подобное. Я в растерянности и хожу по кругу в данный момент.