Skip to content
Advertisement

Props are not rendering inside component

I have a simple setup: I have a parent component that passes data using props to a child component. However, when I pass the props to the child component, the data is not filled in. All the tutorials and guides I’ve followed use the same syntax as I’m using, so I must be missing something. I just can’t seem to figure out what.

JavaScript
JavaScript
JavaScript

When I take a look at the code in the browser, I get this:

JavaScript

This line is the problem:

JavaScript

The data does not get filled in where I want them to, but it just returns {{ type }} or {{ placeholder }}, without actually filling in the passed props.

What am I doing wrong?

Advertisement

Answer

Mustache {{ }} is actually used for display purposes. If we want to bind any variable inside an HTML attribute, we should use the v-bind directive.

JavaScript

A small tip-

  1. We should avoid using the reserved keywords as variable names like type, define, and many more. It can create confusion.
  2. What you did is also fine but it’s better to use the props like this-
JavaScript
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement