[Vuejs]-Vue.js Import Objects

by

1👍

✅

You are pretty close to the answer already. Change = to :, the values to be surrounded with ' instead of " so you have a list of objects

<navigation-drawer v-bind:links="[ {title:'Google', link:'www.google.ch'} , {title:'Youtube', link:'www.youtube.com'} , {title:…, link:…} ]"

Then the navigation-drawer props look like:

props: {
    links: Array
},

and the html loops through the links with a v-for and template:

<div class="navigationdrawer">
    <span @click="openNav" style="fontsize:30px;cursor:pointer;display:flex;justify-content:center;">&#9776;</span>
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" @click="closeNav">&times;</a>
        <template v-for=v-for="(link, index) in links">
            <a v-bind:href="link.link"  :key="index">{{ link.title}}</a>
        </template>
    </div>
</div>
👤depperm

Leave a comment