Как мне l oop над этим вложенным массивом в Vue с v-for? - PullRequest
Новая
       143

Как мне l oop над этим вложенным массивом в Vue с v-for?

0 голосов
/ 04 мая 2020

Я стремлюсь создать меню навигации, где у каждого div будет заголовок и список ссылок 

<div>
  <h1>Header</h1>
    <ul>
      <li>
        <a href="#">Link</a>
      </li>
    </ul>
</div>

Я хочу добавить данные ссылки в data() в Vue и я попытался сделать это так: 

<script>
    export default {
        data() {
            return {
                links: {
                    columns: [
                        {
                            heading: 'Feature',
                            attr: [
                                {
                                    text: 'Something'
                                }
                            ]
                        }
                    ]
                }
            }
        }
    }
</script>

А вот HTML с попыткой использовать v-for

<template>
    <div class="pt-8 sm:pt-16 h-screen navigation-background-gradient">
        <nav class="mx-4 sm:mx-48">
            <div class="sm:grid sm:grid-cols-3 sm:gap-56">
                <div v-for="link in links.columns">
                    <h1 class="mb-5 text-white font-semibold font-montserrat tracking-wider uppercase text-2xl text-shadow-glow">{{ link.heading }}</h1>
                    <ul class="space-y-4">
                        <li>
                            <a class="block text-lg text-menu-link font-inter font-medium tracking-wider" href="#">{{ link.attr }}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</template>

Так что я могу получить доступ к heading хорошо, но я не могу получить доступ attr.text

Если я получу эхо attr.text, я получу [ { "text": "Something" } ], но я не уверен, как к нему добраться. Я подумал, что мне, возможно, понадобится сделать еще один l oop, так как это массив, но я не смог определить правильную комбинацию, чтобы использовать его для отображения.

Мне кажется, что я близок и что-то упустил очевидно, но я не вижу этого. Кто-нибудь может подсказать, где я не так делаю?

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

Благодаря @Dcoder, который указал мне верное направление, я смог разобраться. Я буду публиковать здесь сообщения на случай, если другие столкнутся с этим - надеюсь, это может быть полезно!

Мне пришлось сделать еще один l oop на <li>, но с использованием массива из первого l oop (links.columns), поэтому мой второй l oop состоит из: 

<li v-for="attribute in link.attr">
  <a href="#">{{ attribute.text }}</a>
</li>

Как видите, link хранит остальные данные массива, а поскольку attr также является массивом, я могу ли я через это пройти oop

0 голосов
/ 04 мая 2020

@ Крис, attr - это массив, поэтому вам нужно обращаться к нему по индексу. Так что для вашего случая вы можете сделать так: 

{{ link.attr[0].text }}

Поскольку ваш код показывает, что массив attr содержит только один элемент, поэтому я сделал attr[0], чтобы получить первый элемент массива, мы используем индекс 0. И если ваш массив attr содержит более одного элемента, то вам нужно l oop через другой l oop, как показано в ссылке ниже Вложенный l oop in Vue

...