Как правильно выводить список в html через Vue.JS?

Question

[Александр Корегин]

У меня есть UL список

<ul class="aside-list" id="firstLevelCategories">
            <li class="aside-list__item"><img src="images/face.png" alt="Face icon"><a class="aside-list__link" v-for="item in items" href="#">{{ item.message }}</a></li>
            <li class="aside-list__item"><img src="images/hair.png" alt="Hair icon"><a class="aside-list__link" v-for="item in items" href="#">{{ item.message }}</a></li>
            <li class="aside-list__item"><img src="images/body.png" alt="Body icon"><a class="aside-list__link" v-for="item in items" href="#">{{ item.message }}</a></li>
            <li class="aside-list__item"><img src="images/mineral.png" alt="Mineral icon"><a class="aside-list__link" v-for="item in items" href="#">{{ item.message }}</a></li>
            <li class="aside-list__item"><img src="images/child.png" alt="Child icon"><a class="aside-list__link" v-for="item in items" href="#">{{ item.message }}</a></li>
        </ul>

И вот этим кодом я вывожу все элементы из массива

let firstLevelCategories = { 
    0: "Уход за лицом",
    1: "Уход за волосами",
    2: "Уход за телом",
    3: "Минеральная косметика",
    4: "Уход за детьми"
}

for (let i = 0; i < Object.keys(firstLevelCategories).length; i++) {
    let firstLevelMenu = new Vue({
        el: '#firstLevelCategories',
        data: {
          items: [
            { message: firstLevelCategories[i] }
          ]
        }
    })
}

Но выводит только первый элемент, помогите разобраться в проблеме

Comments

[Дархан]

А по факту посмотрите какие-нибудь курсы,там будет база нужная вам

Answer 1

[Дархан]

v-for вас в помощь

Answer 2

[Алексей Ярков]

Очень рано вы за Vue взялись

Answer 3

[dk-web]

Все не так и все не то...
Я так понимаю вы хотите сделать Меню.
Сделайте компонент Menu.vue

<template>
<ul class="aside-list" id="firstLevelCategories">
            <li class="aside-list__item" v-for="item in items">
<img :src="{{item.img}}" :alt="{item.alt}}">
<router-link :to="{{item.link}} class="aside-list__link">{{ item.message }}</a></li>
        </ul>
</template>
<script>
export default {
    data() {
        return {
       items: [
item1: {
          img: '',
          alt:'',
          link:'/..'
}
]
        }
    }
}
</script>

думаю смысле вы поняли.
а потом в основной компонент делаете
import Menu from './Menu.vue'
регистрируете компонент в разделе components
и просто вставляете как