CODEWITHSUNDEEP
typescriptvue.jsvuejs2
Manoj Verma
Manoj Verma

Reputation: 538

How to use a variable value as placeholder in Vue with typescript

<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.

Upvotes: 5

Views: 18852

Answers (3)

David Japan
David Japan

Reputation: 242

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>

Upvotes: 3

Qonvex620
Qonvex620

Reputation: 3972

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

Upvotes: 9

Manoj Verma
Manoj Verma

Reputation: 538

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

Upvotes: 1

Related Questions