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
x
22
22
1
// LoginPage.vue
2
<script>
3
import Card from '../generic/Card.vue';
4
import Input from '../generic/Input.vue';
5
6
export default {
7
components: {
8
Card,
9
Input,
10
}
11
}
12
</script>
13
14
<template>
15
<Card>
16
<template v-slot:title>Sign in</template>
17
<template v-slot:content>
18
<Input :type="text" :placeholder="Email"></Input>
19
</template>
20
</Card>
21
</template>
22
JavaScript
1
11
11
1
// generic/Card.vue
2
<template>
3
<div class="card rounded-md p-8 border-2 border-sgray hover:border-sgreen text-center">
4
<div class="text-xl font-medium text-black">
5
<slot name="title"></slot>
6
</div>
7
8
<slot name="content"></slot>
9
</div>
10
</template>
11
JavaScript
1
17
17
1
// generic/Input.vue
2
3
<script>
4
export default {
5
props: {
6
type: String,
7
placeholder: String,
8
value: String,
9
}
10
}
11
</script>
12
13
<template>
14
<input type="{{ type }}" placeholder="{{ placeholder }}" value="{{ value }}"/>
15
</template>
16
17
When I take a look at the code in the browser, I get this:
JavaScript
1
11
11
1
<div id="app" data-v-app="">
2
<div class="flex h-screen">
3
<div class="m-auto">
4
<div class="card rounded-md p-8 border-2 border-sgray hover:border-sgreen text-center">
5
<div class="text-xl font-medium text-black">Sign in</div>
6
<input type="{{ type }}" placeholder="{{ placeholder }}">
7
</div>
8
</div>
9
</div>
10
</div>
11
This line is the problem:
JavaScript
1
2
1
<input type="{{ type }}" placeholder="{{ placeholder }}">
2
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
1
4
1
<input v-bind:type="type" v-bind:placeholder="placeholder">
2
// OR
3
<input :type="type" :placeholder="placeholder">
4
A small tip-
- We should avoid using the reserved keywords as variable names like type, define, and many more. It can create confusion.
- What you did is also fine but it’s better to use the props like this-
JavaScript
1
11
11
1
props: {
2
type: {
3
type: String,
4
// add any other validation
5
},
6
placeholder: {
7
type: String,
8
// add any other validation
9
}
10
}
11