<input type="text" placeholder="{{fromTimeWindow}}" v-model="fromTimeWindow"/>
or<input type="text" v-bind:placeholder="{{fromTimeWindow}}" v-model="fromTimeWindow"/>
both of the above above code gives me error. I want to use variable "fromTimeWindow" value as placeholder.
You dont have to {{ }} since you are binding it to your placeholder. To solve that change your code to this.
<input type="text" :placeholder="fromTimeWindow" v-model="fromTimeWindow"/>
new Vue({
el: '#app',
data: () => {
return {
fromTimeWindow: 'Hey here is custom placeholder'
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" :placeholder="fromTimeWindow" />
</div>Ahhh.. Got the answer from : Vue.js change placeholder of text input according to v-model value .
We need to use it like this:
<input type="text" :placeholder="[[fromTimeWindow]]" v-model="fromTimeWindow"/>