Как правильно использовать цикл for во Vue для отображения каждого поля объекта?

Question

Madeline

vue

Как правильно использовать цикл for во Vue для отображения каждого поля объекта?

Каким образом можно выполнить итерацию по объекту `test` и выводить его содержимое в формате:

```
test2: {
   <br />
   <div>
    obj2: "test",
    <br />
    obj3: "test",
   <br />
   </div>
}
```
?

1 ноября 2023 г. 5:27

Ответы на вопрос 2

Похожие вопросы

Answer 1

Вы можете использовать цикл `v-for` в Vue для отображения каждого поля объекта. В вашем случае, чтобы вывести содержимое объекта `test` в указанном формате, вы сможете сделать следующее:

```
<template>
  <div>
    <div v-for="(value, key) in test" :key="key">
      {{key}}: {{value}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      test: {
        obj2: "test",
        obj3: "test",
      },
    };
  },
};
</script>
```

В этом примере мы используем `v-for` для итерации по полям объекта `test`. Затем мы выводим ключ и значение каждого поля объекта `test` в формате `key: value` с помощью двойных фигурных скобок `{{}}`.

Answer 2

const test = {
    test2: {
        obj2: "test",
        obj3: "test",
    },
    test3: {
        obj2: "blab",
        obj3: "blabb2",
    }
};

<template>
    <p>
        <template v-for="(entries, i) in Object.entries(test)">
            <span v-if="i > 0">,<br></span>
            {{ entries[0] }}: {<br>
            <span v-for="subEntries in Object.entries(entries[1]).map(entry => [entry[0], JSON.stringify(entry[1])])">
                <span class="sub">{{ subEntries[0] + ': ' + subEntries[1] }}</span>,<br>
            </span>
            }
        </template>
    </p>
</template>

<style>
p span.sub {
    padding-left: 10px;
}
</style>