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-

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-

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"/>