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.

// 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 class="card rounded-md p-8 border-2 border-sgray hover:border-sgreen text-center">
        <div class="text-xl font-medium text-black">
            <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 class="flex h-screen">
      <div class="m-auto">
         <div class="card rounded-md p-8 border-2 border-sgray hover:border-sgreen text-center">
            <div class="text-xl font-medium text-black">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?

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.

<input v-bind:type="type" v-bind:placeholder="placeholder">
// OR
<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
  }
}

Advertisement

Answer