How to correctly display a list in html through Vue.JS?

Question

Vue.js

I have a UL list

<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>

And with this code, I display all the elements from the array

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] }
          ]
        }
    })
}

But it displays only the first element, help me figure out the problem

Answer 1

v-for to help you