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

Question

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

Just use v-bind:placeholder="fromTimeWindow". You can't use moustache in attribute value binding anyway. — Terry
– Terry, Commented Feb 21, 2020 at 8:52

Qonvex620 · Accepted Answer · 2020-02-21 08:38:01Z

9

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

answered Feb 21, 2020 at 8:38

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Japan · Accepted Answer · 2020-02-21 08:41:49Z

3

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>

answered Feb 21, 2020 at 8:41

David Japan

2521 silver badge3 bronze badges

Comments

Manoj Verma · Accepted Answer · 2020-02-21 08:29:18Z

1

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

answered Feb 21, 2020 at 8:29

Manoj Verma

5381 gold badge5 silver badges13 bronze badges

2 Comments

David Japan Over a year ago

You dont even need [[]] scope

Manoj Verma Over a year ago

yeah. removed it after your comment. Thanks :)

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related