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.
// LoginPage.vue
<script>
import Card from '../generic/Card.vue';
import Input from '../generic/Input.vue';
export default {
components: {
Card,
Input,
}
}
</script>
<template>
<Card>
<template v-slot:title>Sign in</template>
<template v-slot:content>
<Input :type="text" :placeholder="Email"></Input>
</template>
</Card>
</template>
// generic/Card.vue
<template>
<div >
<div >
<slot name="title"></slot>
</div>
<slot name="content"></slot>
</div>
</template>
// generic/Input.vue
<script>
export default {
props: {
type: String,
placeholder: String,
value: String,
}
}
</script>
<template>
<input type="{{ type }}" placeholder="{{ placeholder }}" value="{{ value }}"/>
</template>
When I take a look at the code in the browser, I get this:
<div id="app" data-v-app="">
<div >
<div >
<div >
<div >Sign in</div>
<input type="{{ type }}" placeholder="{{ placeholder }}">
</div>
</div>
</div>
</div>
This line is the problem:
<input type="{{ type }}" placeholder="{{ placeholder }}">
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?
CodePudding user response:
When you pass the props then it means you are using it somewhere dynamically, and if you are using it inside the template to bind the attributes then instead of {{ }}
(which actually used for the display purpose) use the bind(:)
syntax-
<input :type="type" :placeholder="placeholder">
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-
props: {
type: {
type: String,
// add any other validation
},
placeholder: {
type: String,
// add any other validation
}
}
CodePudding user response:
Try to bind props in component:
<input :type="type" :placeholder="placeholder" :value="value"/>