When I try passing props to attributes of HTML elements in .vue files, they just stop rendering. What am I doing wrong?

script.js

import hInput from './components/hInput.vue'
Vueponent('h-input', hInput);
const app = new Vue({
    el: '#head',
});

index.php

<div id="head">
    <h1>{{config('app.name')}}</h1>
    <h-input placeholder="Hi" name="hello"></h-input>
</div>

hInput.vue

<template>
    <div>
        <input type="text" placeholder="{{placeholder}}">
    </div>
</template>

<script>
    export default {
        props: ['placeholder', 'name']
    };
</script>

When I try passing props to attributes of HTML elements in .vue files, they just stop rendering. What am I doing wrong?

script.js

import hInput from './components/hInput.vue'
Vue.component('h-input', hInput);
const app = new Vue({
    el: '#head',
});

index.php

<div id="head">
    <h1>{{config('app.name')}}</h1>
    <h-input placeholder="Hi" name="hello"></h-input>
</div>

hInput.vue

<template>
    <div>
        <input type="text" placeholder="{{placeholder}}">
    </div>
</template>

<script>
    export default {
        props: ['placeholder', 'name']
    };
</script>

• javascript
• vue.js
• vue-component

1 Answer 1

Use the binding syntax, not text interpolation.

<template>
    <div>
        <input type="text" v-bind:placeholder="placeholder">
    </div>
</template>

There is also a shorthand.

<template>
    <div>
        <input type="text" :placeholder="placeholder">
    </div>
</template>