Для отображения каждого поля объекта в Vue.js с помощью цикла for можно воспользоваться директивой v-for. Директива v-for позволяет перебрать элементы массива или объекта и создать элементы DOM на основе шаблона.
Если в объекте у вас есть массив, то можно перебрать его элементы следующим образом:
<div v-for="item in object.myArray" :key="item.id">
{{ item.name }}
</div>
Здесь мы используем директиву v-for для перебора элементов массива object.myArray. Внутри цикла мы выводим свойство name каждого элемента.
Если в объекте у вас есть набор пар "ключ-значение", то можно перебрать их следующим образом:
<div v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</div>
Здесь мы используем директиву v-for для перебора пар "ключ-значение" в объекте object. Внутри цикла мы выводим ключ и значение каждой пары.
Опционально, мы также устанавливаем атрибут :key для каждого созданного элемента в цикле. Это позволяет Vue.js эффективно отслеживать изменения в DOM и обновлять только необходимые элементы при изменении данных.
Пример выше покрывает основные сценарии использования цикла for в Vue.js для отображения полей объекта. Надеюсь, это поможет вам начать работу с отображением полей объекта в цикле в вашем проекте на Vue.js.