Hey there! I've been working on creating a Vue page, breaking it down into components, and populating it with content from json. It all seems pretty straightforward, but I've hit a snag. Why is the href parameter not showing up in the right place? It's been puzzling me for hours now. Can anyone provide some insight?
index.vue
<template>
<section>
<Hero
v-for="(hero, index) in heroes"
:title="hero.title"
:description="hero.description"
:more="hero.more"
:href="hero.href"
:key="index"
/>
</section>
</template>
Hero.vue
<template>
<div>
<h2>{{ title }}</h2>
<p>{{ description }}</p>
<a :href="href">{{ more }}</a>
</div>
</template>
<script>
Result
<section>
<div href="/create">
<h2>Create and share your photo stories.</h2>
<p>
Photosnap is a platform for photographers and visual storytellers. We make
it easy to share photos, tell stories and connect with others.
</p>
<a>Get an Invite </a>
</div>
...
</section>