Как использовать 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 или что-то подобное. Я в растерянности и хожу по кругу в данный момент.

Вернуться на верх