Как отобразить каждое поле объекта Vue for loop?

Question

[adizh]

К примеру есть объект:

сonst test = {
 test2: {
   obj2: "test",
   obj3: "test",
  },
 test3: {
   obj2: "blab",
   obj3: "blabb2",
  }

.
нужно сделать итерацию и показать этот объкт как:

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

То есть точно в таком же виде

Comments

[Дмитрий Кузнецов]

Вы хотите что-то типо вывод кода сделать?

Answer 1

[oexlkinq]

это SFC конечно, но в целом логику не сложно вынуть

<script setup>
const test = {
    test2: {
        obj2: "test",
        obj3: "test",
    },
    test3: {
        obj2: "blab",
        obj3: "blabb2",
    }
};
</script>
<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>