How to pass href parameter from parent vue component to child component?

Question

Good evening! I'm trying to create a page in Vue, parsing it into components, and rendering content using json. And it seems to be nothing complicated, but there is a problem. But why is the href parameter in the wrong place? Please tell me, I have been unable to solve this riddle for several hours.

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>

Have you looked at this link? stackoverflow.com/questions/40899532/… — berkobienb
– berkobienb, Commented Apr 8, 2022 at 0:17

omerS · Accepted Answer · 2022-04-08 00:37:41Z

2

You probably forgot to define href as a prop in your Hero component.

Make sure you have added href as prop in your Hero component.


  props: {
    href: {
        type: String,
        required: true
     }

  }

answered Apr 8, 2022 at 0:37

omerS

8842 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass href parameter from parent vue component to child component?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related