Блог

Я новичок в vue и пытаюсь перенести приложение boostrap старой школы на модель BS5 vue3. Я пытаюсь воссоздать это: https://www.screencast.com/t/ZfnE60z4cR8 основан на объекте json, извлеченном из api. На данный момент это 4 вложенных массива объектов (массивы для сохранения сортировки), но я могу изменить любую структуру, которая мне нужна, если это не оптимально. В двух словах, объекты содержат пространства, содержат устройства, Содержат точки данных (температура, влажность и т. Д.). Есть аварийные сигналы и другие условия, но на данный момент я просто пытаюсь выяснить, как отобразить базовую структуру. У меня есть подозрение, что компоненты имеют наибольший смысл, и у меня есть средства для рендеринга, но как мне визуализировать пробелы внутри этих контейнеров, затем устройства и каждую из их соответствующих точек данных (которые, как я предполагаю, будут одним и тем же компонентом, которому переданы имя, значение и единица измерения, например% rH, градусы F,и т.д.)

     <div id="db">
        <facility-block v-for="facility in facilities" :name="facility.name">
            <space-block v-for="space in facilities.spaces" :name="space.name">
                
            </space-block>
        </facility-block>
    </div>
  

Вот ручка: https://codepen.io/daemach/pen/abNQdoq

Я думаю, вы просто нацелены на неправильную переменную. Вместо facilities.spaces того, чтобы вы, вероятно, ищете facility.spaces

 <div id="db">
    <facility-block v-for="facility in facilities" :name="facility.name">
        <space-block v-for="space in facility.spaces" :name="space.name">
        </space-block>
    </facility-block>
</div>